ElementUI组件: 日期时间选择器DateTimePicker: 限制可选时间范围至时分秒级别

LogTime: 2023-12-15 05:08:21

LastModifiedTime: 2025-01-31 02:06:26

说明

目的

限制日期时间选择器: 限制到时分秒级别
例子可选时间范围 [2023-12-07 10:00:05, 2023-12-15 07:04:03]

调试过程: 注意点

使用 this.$refs.dPicker.pickerOptions.selectableRange = `${sTimeHMS} - ${eTimeHMS}`;
的确可以修改实际时分秒选择范围的值, 但el-date-picker的选择限制不会重新刷新加载;

如果不是需要按日期去限制时分秒的限制, 可以一开始就pickerOptions中对selectableRange进行限制, 即对所有日期均生效同一时分秒限制;
即使这样, 也只能限制到时分, 无法限制到秒单位;
如果限制所有日期不可选, 但是el-date-picker的disabled为false, 操作点击时分秒, 时分秒可选范围为所有, 日期限制为当天

(奇怪的设定, 算钻空子的感觉, 代码原因应该是当天2023-12-15的时分秒限制为全天, 所以即使限制了日期, 也可借助时分秒获取到日期从而进行回填)
存在优化空间;
- 补充另一种简单粗暴但有效的方法(当时最后的处理逻辑也是采用这种): 给el-date-picker增加@change事件onChangeDatePicker, 然后在onChangeDatePicker(val)内部对接收的val进行校验，不符合可以直接置空(这样可以解决无法判断秒是否合规的问题).

源码

<el-date-picker
  ref="dPicker"
  v-model="form.startTime"
  type="datetime"
  placeholder="日期时间选择器可选范围限制测试"
  format="yyyy-MM-dd HH:mm:ss"
  value-format="yyyy-MM-dd HH:mm:ss"
  :picker-options="pickerOptions"
  :disabled="dPickerDisabled"
>
</el-date-picker>

export default {
  data: {
    return {
      form: {
        startTime: '',
      },
      startTime: '2023-12-07 10:00:05', // 人为限制 起始时间
      endTime: '2023-12-15 07:04:03', // 人为限制 终止时间
    }
  },
  // computed计算速度大于 props数据传递速度
  computed: {
    // pickerOptions 初始化时即决定, 所以必须整个更新
    pickerOptions(){
      let sTime = this.startTime;
      let eTime = this.endTime;
      return {
        // disabledDate(time){} 这种写法不识别
        disabledDate: time => {
          if (eTime && eTime.localeCompare(new Date().formatToStr('yyyy-MM-dd HH:mm:ss')) < 0){
            return true; // 限制所有日期不可选
          } else if (!!eTime && !!sTime){
            return time.getTime() < new Date(sTime).getTime() - 8.64e7
            || time.getTime() > new Date(eTime).getTime();
          } else if (!!eTime){
            return  time.getTime() < new Date(sTime).getTime() - 8.64e7 || time.getTime() > Date.now(); // 
          } else if (!!sTime){
            return time.getTime() > new Date(eTime).getTime() || time.getTime() > Date.now();
          }

          return time.getTime() > Date.now();
        },
        selectableRange: this.sTimeRangeHMS // `05:06:07 - 21:22:23`
      }
    },
    sTimeRangeHMS(){
      let timeSelected = this.sTimeYMD; // 避免 切换同天时分秒选择的时候 触发 时分秒限制从而导致整个pickerOptions重新计算
      let sTimeArr = this.startTime.split(' ');
      let eTimeArr = this.endTime.split(' ');
      let sTimeHMS = (!!this.startTime && sTimeArr[0] == timeSelected) ? sTimeArr[1] : '00:00:00';
      let eTimeHMS = (!!this.endTime && eTimeArr[0] == timeSelected) ? eTimeArr[1] : '23:59:59';
      
      // this.$refs.dPicker.pickerOptions.selectableRange = `${sTimeHMS} - ${eTimeHMS}`;
      return `${sTimeHMS} - ${eTimeHMS}`
    },
    sTimeYMD(){
      return this.form.startTime.split(' ')[0];
    },
    dPickerDisabled(){
      if (!!this.endTime && this.endTime.localeCompare(new Date().formatToStr('yyyy-MM-dd HH:mm:ss')) < 0){
        return true;
      } else {
        this.form.startTime = new Date().formatToStr('yyyy-MM-dd HH:mm:ss'); // 默认回填当前日期
        return false;
      }
    }
  },
};
Date.prototype.formatToStr = function(dateFormat){
  // Date类型数据 通过 dateFormat字符串格式 转换为指定格式字符串
  // 略
}