Vue iview时间组件DatePicker,设置开始时间和结束时间约束
Posted donaf
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue iview时间组件DatePicker,设置开始时间和结束时间约束相关的知识,希望对你有一定的参考价值。
<FormItem label=""> <Row> <Col span="11"> <DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholder="开始时间" v-model="starttime"></DatePicker> </Col> <Col span="2" style="text-align: center">-</Col> <Col span="11"> <DatePicker type="date" :options="endTimeOptions" @on-change="endTimeChange" placeholder="结束时间" v-model="endtime"></DatePicker> </Col> </Row> </FormItem>
export default { data() { return { startTimeOptions: {}, //开始日期设置 endTimeOptions: {}, //结束日期设置 starttime: ‘‘, //开始日期model endtime: ‘‘,//结束日期model } }, methods: { startTimeChange: function(e) { //设置开始时间 this.starttime = e; this.endTimeOptions = { disabledDate: date => { let startTime = this.starttime ? new Date(this.starttime).valueOf() : ‘‘; return date && (date.valueOf() < startTime); } } }, endTimeChange: function(e) { //设置结束时间 this.endtime = e; let endTime = this.endtime ? new Date(this.endtime).valueOf() - 1 * 24 * 60 * 60 * 1000 : ‘‘; this.startTimeOptions = { disabledDate(date) { return date && date.valueOf() > endTime; } } }, } }
以上是关于Vue iview时间组件DatePicker,设置开始时间和结束时间约束的主要内容,如果未能解决你的问题,请参考以下文章
iview组件DatePicker type="datetimerange绑定初始默认时间值
vue2.X+iview2.xiView在非 template/render 模式下标签的转化