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,设置开始时间和结束时间约束的主要内容,如果未能解决你的问题,请参考以下文章

vue iview DatePicker

iview组件DatePicker type="datetimerange绑定初始默认时间值

vue2.X+iview2.xiView在非 template/render 模式下标签的转化

view组件 DatePicker---- 点击重置按钮,无法正常将DatePicker组件的时间范围清空

iView组件Tabs嵌套使用

iview组件怎么和vue-router结合