element-ui之DateTimePicker 日期时间选择器

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

小新_020

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

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： elementui

本文链接：https://blog.youkuaiyun.com/demo_020/article/details/112724464

笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何使用Element UI的DateTimePicker组件实现特定的交互功能。内容包括：设置起始日期为当前系统日期之前不可选，结束日期必须大于起始时间，以及限制某些时段不可选择。通过在data()中编写逻辑代码，成功实现了这些限制，并展示了实现效果。

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

遇到一个需求，需要两个日期时间选择器，之间进行交互。
起始日期：当前系统日期之前的日期不能选择。
结束日期：大于起始时间，且结束之前的日期可选。
限制某一时段无法选择

引入DateTimePicker 日期时间选择器

 <el-date-picker
      v-model="start_time"
      type="datetime"
      placeholder="选择起始日期"
      :picker-options="start_Date"
      format="yyyy-MM-dd HH:mm"  
      value-format="yyyy-MM-dd HH:mm"//精确到分
      @change="dateChangebirthday1()"
      >
 </el-date-picker>
 <el-date-picker
      v-model="end_time"
      type="datetime"
      placeholder="选择结束日期"
      :picker-options="end_Date"
      format="yyyy-MM-dd HH:mm"  
    >
 </el-date-picker>

下面是逻辑代码，因为只是对数据的控制，方法写在了data（）{}中。

start_time: "",
      end_time: "",
      start_Date: {
        disabledDate: (time) => {
          if (
            this.end_time == "" ||
            this.end_time == null ||
            this.end_time == undefined
          ) {
            return time.getTime() < Date.now() - 8.64e7;
          } else {
            return (
              time.getTime() > this.end_time ||
              time.getTime() < Date.now() - 8.64e7
            );
          }
        },
        selectableRange: "03:30:00 - 23:59:00",
      },
      end_Date: {
        disabledDate: (time) => {
          if (
            this.start_time == "" ||
            this.start_time == null ||
            this.start_time == undefined
          ) {
            return time.getTime() < Date.now() - 8.64e7;
          } else {
            return time.getTime() < this.start_time;
          }
        },
        selectableRange: "03:30:00 - 23:59:00",
      },