对于手机端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的样式
mint ui datetimepicker 手机端jquery datetimepicker 总结应用
原文：http://www.cnblogs.com/smallteeth/p/8004462.html