element-ui之DateTimePicker 日期时间选择器

遇到一个需求,需要两个日期时间选择器,之间进行交互。
起始日期:当前系统日期之前的日期不能选择。
结束日期:大于起始时间,且结束之前的日期可选。
限制某一时段无法选择

引入DateTimePicker 日期时间选择器

 <el-date-picker
      v-model="start_time"
      type="datetime"
      placeholder="选择起始日期"
      :picker-options="start_Date"
      format="yyyy-MM-dd HH:mm"  
      value-format="yyyy-MM-dd HH:mm"//精确到分
      @change="dateChangebirthday1()"
      >
 </el-date-picker>
 <el-date-picker
      v-model="end_time"
      type="datetime"
      placeholder="选择结束日期"
      :picker-options="end_Date"
      format="yyyy-MM-dd HH:mm"  
    >
 </el-date-picker>

下面是逻辑代码,因为只是对数据的控制,方法写在了data(){}中。

start_time: "",
      end_time: "",
      start_Date: {
     
        disabledDate: (time) => {
     
          if (
            this.end_time == "" ||
            this.end_time == null ||
            this.end_time == undefined
          ) {
     
            return time.getTime() < Date.now() - 8.64e7;
          } else {
     
            return (
              time.getTime() > this.end_time ||
              time.getTime() < Date.now() - 8.64e7
            );
          }
        },
        selectableRange: "03:30:00 - 23:59:00",
      },
      end_Date: {
     
        disabledDate: (time) => {
     
          if (
            this.start_time == "" ||
            this.start_time == null ||
            this.start_time == undefined
          ) {
     
            return time.getTime() < Date.now() - 8.64e7;
          } else {
     
            return time.getTime() < this.start_time;
          }
        },
        selectableRange: "03:30:00 - 23:59:00",
      },

效果图如下:
element-ui之DateTimePicker 日期时间选择器_第1张图片
element-ui之DateTimePicker 日期时间选择器_第2张图片
element-ui之DateTimePicker 日期时间选择器_第3张图片

你可能感兴趣的:(笔记,elementui)