element-ui DatePicker 日期选择器-控制选择精确到时分秒-禁止选择今天之前-或者今天之后日期

571 阅读1分钟

通过:picker-options="pickerOptions"控制时间选择

// 日期选择器其实也提供方法Picker Options
<el-date-picker
   v-model="date"
   type="date"
   size="small"
   value-format="yyyy-MM-dd"
   format="yyyy-MM-dd"
   :placeholder="'选择日期'"
   :picker-options="pickerOptions"
   </el-date-picker>

在data中定义pickerOptions即可

// 今天之前时间禁用

  pickerOptions: {
                //这里是限制今天以前的时间将其禁用
                //如果减去后面的时间24 * 60 * 60 * 1000,禁止用户选择今天之前的日期,不包含今天;否则禁止用户选择今天之前的日期,包含今天
                disabledDate(time) {
                    return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
                },
                //这里限制了只能选择当前时间的五分钟后
                selectableRange:
                    new Date().getHours() +
                    ":" +
                    (new Date().getMinutes() + 5) +
                    ":00 - 23:59:00",
            },

今天之后时间禁用

  pickerOptions: {
                //这里是限制今天之后的时间将其禁用
                //如果减去 24 * 60 * 60 * 1000今日不可选,如果不减则今日可选
                disabledDate(time) {
                    return time.getTime() > new Date().getTime();
                },
                //这里限制了只能选择当前时间的五分钟后
                selectableRange:
                    new Date().getHours() +
                    ":" +
                    (new Date().getMinutes() + 5) +
                    ":00 - 23:59:00",
            },