Vue 使用Jquery UI实现日期组件

 项目中要求使用JqueryUI的datepicker来实现组件。
一开始考虑只需要加载一次，所以就在Vue生命周期函数中初期化datepicker。

mounted (){let _that = this;$(this.$el).datepicker({dateFormat: 'yy-mm-dd',//日期格式minDate:'1926-12-25',//最小日期showOn:"click",beforeShowDay: function (date) {                if (date.getDay() === 0 || date.getDay() === 6 ) {//不可选择日期return [false, '', ''];} else {return [true];}},            onSelect: function(dateText){                 _that.setDataValue(val); //日期特殊处理            }});$.datepicker.setDefaults($.datepicker.regional["ja"]);//日语项目},

后来发现，由于项目是前后端分离的，有时候多次页面请求之后，datepicker的面板无法被呼出的情况。
考虑再三，决定把datepicker的初期化放到点击事件里。 以下是完整代码：

Vue.component('pure-date', {template: ``,props: {formData: {type: Object,default() {return {};}},},computed: {dataValue(){return this.formData[this.$attrs['id']];}},methods: {dateShow(){let _that = this;$(this.$el).datepicker({dateFormat: 'yy-mm-dd',//日期格式minDate:'1926-12-25',//最小日期showOn:"click",beforeShowDay: function (date) {                if (date.getDay() === 0 || date.getDay() === 6 ) {//不可选择日期return [false, '', ''];} else {return [true];}},            onSelect: function(dateText){                 _that.setDataValue(val); //日期特殊处理            }}).datepicker("show");$.datepicker.setDefaults($.datepicker.regional["ja"]);//日语项目//解除不必要的事件$(this.$el).unbind("keypress", $.datepicker._doKeyPress);$(this.$el).unbind("keydown", $.datepicker._doKeyDown);$(this.$el).unbind("doKeyUp", $.datepicker._doKeyUp);},setDataValue(){.....},},   
});

水平有限，忘大家不吝指正！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！