element-ui日期时间范围选择（两天之差）

最新推荐文章于 2024-08-13 00:11:49 发布

weixin_34376562

最新推荐文章于 2024-08-13 00:11:49 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： ui javascript python ViewUI

原文链接：https://juejin.im/post/5c778b2af265da2dbe02f847

本文介绍如何使用Element UI的日期选择器组件，并通过设置pickerOptions实现日期范围的限制，确保用户只能选择特定的时间范围，例如两天内的时间段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

    <el-date-picker
      clearable 
      v-model="times"
      :picker-options="pickerOptions"
      size="medium"
      style="width:25%"
      type="datetimerange"
      range-separator="-"
      value-format="yyyy-MM-dd HH:mm:ss"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
复制代码

script

data(){
    return{
    //限制时间范围选择(两天)
      pickerMinDate:'',
      pickerOptions: {
      //onPick当type="datetimerange"时有效
          onPick: ({ maxDate, minDate }) => {
            this.pickerMinDate = minDate.getTime()
            if (maxDate) {
              this.pickerMinDate = ''
            }
          },
          disabledDate: (time) => {
            if (this.pickerMinDate!='') {
              let tow = 1 * 24 * 3600 * 1000 //重点是在这里计算相差几天
              let minTime = this.pickerMinDate - tow
              let maxTime = this.pickerMinDate + tow
              return time.getTime() < minTime || time.getTime() > maxTime
              
            }
          }
      },
    }
}
复制代码