对于手机端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的样式
时间: 2024-10-29 11:37:15