my97DatePicker日期控件

实现功能: 点击输入框 弹出日期选择项

1、下载My97DatePicker组件包

下载地址：http://download.csdn.net/detail/emoven/8249073

2、在页面中引入该组件js文件：

<script type="text/JavaScript" src="My97DatePicker/WdatePicker.js"></script> 

我需要使用 vue 来完成页面日期同步的效果,因此 使用了 v-model
1.需要一个日期改变的函数 (一般使用change/onchange ,my97控件中使用onpicked)
2.需要知道vue和my97怎么绑定

<input type="text" id="input" v-model="currentPageDate" v-on:click="datePicker('input')"  value="2020-05-21"/>

datePicker: function (elementId) {
   let vueObj = this; //重点:vueObj此时就代表了 vue 中的 this,可以调用vue实例中的数据和方法
    WdatePicker({
        el: elementId, //input框中的id值
        dateFormat: 'yyyy-MM-dd',//日期格式，可以只显示年或年月，也可以额外显示时间
        onpicked: function () {
            var value = $("#" + elementId).val();
            vueObj.date = value;
            vueObj.getDateChange();
        },
        oncleared: function () {
            vueObj.date = null;
        },
        isShowClear: true,//是否显示清空
        readOnly: true, // 是否只读
        skin:'whyGreen', //皮肤
        maxDate:'%y-%M-%d' //最大可选时间为当天日期,之后置灰,不可选
    });
},
 // 日期值改变
  getDateChange(){
     this.currentPageDate = $('#input').val();
     this.dateFormat()
   },
// 日期格式化 *月*日
dateFormat(){
  var dateStrArr = this.currentPageDate.split('-');
  // 月份
  if(dateStrArr[1] < 10){
    this.month = dateStrArr[1].substring(1);
  }else{
    this.month = dateStrArr[1]
  }
  // 日期
  if(dateStrArr[2] < 10){
    this.day = dateStrArr[2].substring(1);
  }else{
    this.day = dateStrArr[2];
  }
  this.currentPageDateFormat = this.month + '月' + this.day + '日';
},

点击日期插件触发click事件调用方法datePick，将元素ID作为配置项。接下来是重点，wdatepicker点击日期后会触发它的onpicked事件，我们给这个事件添加一个方法，获取ID为我们传入ID的元素的value，将其赋值给vue中的属性（在插件内使用this并不能指向vue，因此需要在插件外将this赋值给vueObj作为过渡）。同理点击日期插件的清空按钮会触发oncleared事件（其实还有onclearing事件，有特殊需要也可以自行添加），做相同的操作就可以了。

原创:https://blog.csdn.net/Andrewniu/article/details/87934979

原创:https://blog.csdn.net/qq_37843168/article/details/81201128