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: `
              <input v-if="dataValue.visible" type="text" :name="elId"  v-model.lazy="dataValue.value" 
               autocomplete="off" @change="setDataValue(dataValue.value)"  @click="dateShow" />
            `,
     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(){
	    	.....
	    },
	 },   
});

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