mint ui datetimepicker 手机端jquery datetimepicker 总结应用

Posted 2020-10-17

对于手机端datetimepicker的使用 在使用minit ui 的datatimepicker的使用方法

首先它需要两个触发器 这里因为项目用到的是开始到结束的时间 我就点击的时候手动传入了一个参数

<input id=‘start‘ type="text" class=‘form-control input-sm‘ readonly="" name=‘start‘ @click=‘openPicker("start")‘ v-model=‘startTime‘>
<input id=‘end‘ type="text" class=‘form-control input-sm‘ readonly="" name=‘end‘ @click=‘openPicker("end")‘ v-model=‘endTime‘> 

　　然后在vue的methods中声明这个方法

openPicker(type) {
        this.type=type;
        this.$refs.picker.open();
      },

　　这里我接受了 在点击的时候传递的参数用来判断我是点击的是开始还是结束，再点击确定以后会触发一个事件handleConfirm

handleConfirm(data) {
        let date = moment(data).format(‘YYYY-MM-DD‘);
        if(this.type==‘start‘){
          this.startTime = date;
        }
        if(this.type == ‘end‘){
          this.endTime = date;
        }
      }

　　再点击确定以后我把点击的内容传递给input中  着里的时间必须要格式化一下 因为单位就让穿的格式就是YYYY-MM-DD 所以我们得把参数格式化下

      这里推荐使用的是 moment.js

import moment from ‘moment‘

　　对应的文档地址是 http://momentjs.cn/docs/ 这样就可以在我们事先的input标签中添加到我们想要的时间的参数了 补一下组件的选项

<mt-datetime-picker
      v-model="pickerVisible"
      type="date"
      ref="picker"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleConfirm"
      :startDate = ‘maxdata‘
      :endDate = ‘mindata‘
      >
    </mt-datetime-picker>

　　对于不用vue的朋友 我推荐一款手机端做的非常好的jquery插件

　　链接：https://pan.baidu.com/s/1pLyuN6F 密码：yoq5

　　懂js得 进入date.js 就可以调整它的选项 类似minit ui的样式