vue移动端设置出生日期

屏幕快照 2018-09-09 09.13.17.png

屏幕快照 2018-09-09 09.14.20.png

使用mobiscroll是个很好用的jquery日期插件,它可以实现在移动端滚动选择日期。
在vue中如何使用插件,在mounted中调用插件

        
          出生日期
            
          
            
          
        
data() {
      return {
        birthday: ''
      }
    },
    mounted() {
      require('./jquery.min');
      require('./mobiscroll.core-2.5.2');
      require('./mobiscroll.core-2.5.2-zh');
      require('./mobiscroll.datetime-2.5.1');
      require('./mobiscroll.datetime-2.5.1-zh');
      var currYear = (new Date()).getFullYear();
      var opt = {};
      opt.date = {preset: 'date'};
      opt.datetime = {preset: 'datetime'};
      opt.time = {preset: 'time'};
      opt.default = {
        theme: 'android-ics light', //皮肤样式
        display: 'modal', //显示方式
        mode: 'scroller', //日期选择模式
        dateFormat: 'yyyy-mm-dd',
        lang: 'zh',
        showNow: true,
        nowText: "今天",
        startYear: currYear - 80, //开始年份
        endYear: currYear, //结束年份
        onClose: function (textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈:set/cancel
          textVale=new Date(textVale);
          textVale=textVale.getTime()/1000;
          this.birthday= textVale;
          $.ajax({
            type: "GET",
            url: "api/set",
            dataType:"json",
            data:{"birthday":this.birthday},
            success:function (data) {
              if (data.code == 200) {
                this.birthday = data.data.birthday;
              }
            }
          })
        }
      };
      $("#USER_AGE").mobiscroll($.extend(opt['date'], opt['default']));
    }
屏幕快照 2018-09-09 09.39.38.png

全部代码






你可能感兴趣的:(vue移动端设置出生日期)