element中DateTimePicker 日期时间选择器组件日期范围如何限制为1天

最新推荐文章于 2025-05-30 09:06:19 发布

原创最新推荐文章于 2025-05-30 09:06:19 发布 · 2.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

这篇博客介绍了如何在Element UI的DateTimePicker组件中设置日期限制，只允许用户选择1天的时间范围。通过定义pickerOptions对象，并在其中设置onPick和disabledDate方法，实现了当选择开始日期后，结束日期被限制在开始日期的同一日。代码示例展示了具体的实现细节，包括v-model、@change事件和picker-options属性的使用。

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

目前项目中有一个需求，要求选择时间的时候日期限制为1天。如下图所示
需要显示的日期范围为选中后的前后24小时
选择后的效果

这是怎么实现的呢？
1、引入element中的DateTimePicker组件
type是你想显示的类型
change方法会在日期改变时调用
picker-options才是我们处理时间的重点

<el-form-item :label="getLanguageUrl.InventoryTaskTime||'库存同步时间'" class="active">
            <el-date-picker class="daterange" size="mini" v-model="taskTime" type="datetimerange" range-separator="至" start-placeholder="开始时间" 
            							end-placeholder="结束时间" @change="payTimeChange" :picker-options="pickerOptions"></el-date-picker>
 </el-form-item>

pickerOptions实在data中定义好的，组件内部会按照下面的代码规则对日期进行处理

//定义pickerOptions对象，这个对象中可以设置  onPick  disabledDate
      taskTime: null,
      pickerOptions: {
        onPick: (time) => {
          // //此处的time为选择日期时的结果，time为一个对象，有两个值，一个是maxDate,一个是minDate,详细见下图，
          // //以下判断是只选择了一个值的时候，也就是默认的开始值。
          //当第一时间选中才设置禁用
          if (time.minDate && !time.maxDate) {
            this.queryParams.taskStart = time.minDate
          }
          if (time.maxDate) {
            this.queryParams.taskStart = ''
          }
        },
        disabledDate: (time) => {
          let timeOptionRange= this.queryParams.taskStart
          let secondNum = 60 * 60 * 24 * 1 * 1000
          if (timeOptionRange) {
            return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum
          }
        },
      },