el-date-picker时间限制处理

Holly31

已于 2023-06-02 15:32:29 修改

阅读量339

点赞数

文章标签： vue.js 前端前端框架 javascript

于 2023-05-30 16:13:15 首次发布

本文链接：https://blog.csdn.net/Holly31/article/details/130950940

版权

文章讲述了在Vue项目中，使用el-date-picker组件时如何通过watch监听处理时间变化，结合moment.js动态设置选择器的可选范围，确保用户无法选择在预设时间之前的时间。当时间与预节点时间相同时，只允许选择该时间点之后到当天23:59:59，否则允许全天选择。

摘要由CSDN通过智能技术生成

时间选择器，某个时间之前不可选

<el-form-item label="处理时间">
                <el-date-picker
                  clearable
                  v-model="timeDealForm.nodeTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择处理时间"
                  :picker-options="pickerOptions1"
                >
                </el-date-picker>

watch: {
    'timeDealForm.nodeTime'(selectTime) {
      const date = moment(selectTime).format('YYYY-MM-DD');
      if(this.preNode){
        const preNodeTime = moment(this.preNode.nodeTime).format('YYYY-MM-DD');
        if (date === preNodeTime){
          this.pickerOptions1.selectableRange = `${moment(this.preNode.nodeTime).format('HH:mm:ss')} - 23:59:59`
        } else {
          this.pickerOptions1.selectableRange = '00:00:00 - 23:59:59'
        }
      }
    },
},

 getTimePickerRange(dateStr) {
      this.pickerOptions1 = {
        disabledDate(time) {
          var date = new Date(dateStr);
          var time1 = date.getTime() - 1 * 24 * 60 * 60 * 1000; //得到时间戳
          return time.getTime() < time1;
        },
        selectableRange: '00:00:00 - 23:59:59'
      };
    },

this.getTimePickerRange("2022-12-20 10:10:50");