el-date-picker日期时间限制

最新推荐文章于 2024-09-09 15:33:36 发布

前端小溪

最新推荐文章于 2024-09-09 15:33:36 发布

阅读量2.3k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44952258/article/details/109056250

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Element UI的el-date-picker组件在Vue应用中实现日期时间筛选，确保用户只能选择当天及之后的日期。通过设置`disabledDate`函数和`onPick`回调，实现了动态日期限制功能。

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

演示效果

在这里插入图片描述

只能选择同一天日期

在这里插入图片描述

<el-date-picker
    v-model="update.form.value"
    @change="selectData"
    type="datetimerange"
    value-format="yyyy-MM-dd HH:mm:ss"
    range-separator="至"
    start-placeholder="开始日期"
    :picker-options="pickerOptions"
    end-placeholder="结束日期"
    :default-time="['00:00:00', '00:00:00']"
 ></el-date-picker>

methods: {
    // 日期时间筛选
    selectData(e) {
        if (e === null) {
            this.pickerOptions.startDate = null;
        }
    },
}

data () {
  return {
    pickerOptions: {
        startDate: null,
        disabledDate: (time) => {
          if (
            this.pickerOptions.startDate === undefined ||
            this.pickerOptions.startDate === null
          ) {
            return time.getTime() < Date.now() - 8.64e7;
          } else {
            return (
              time.getTime() >
                this.pickerOptions.startDate.getTime() + 86399000 ||
              time.getTime() < this.pickerOptions.startDate.getTime()
            );
          }
        },
        onPick: (dateRange) => {
          this.pickerOptions.startDate = dateRange.minDate;
          if (dateRange.maxDate) {
            this.pickerOptions.startDate = null;
          }
        },
    },
  }
}

限制选择今天及之后的日期时间

在这里插入图片描述


<el-date-picker
    v-model="update.form.value"
   type="datetimerange"
    value-format="yyyy-MM-dd HH:mm:ss"
    range-separator="至"
    start-placeholder="开始日期"
    :picker-options="pickerOptions"
    end-placeholder="结束日期"
    :default-time="['00:00:00', '00:00:00']"
></el-date-picker>

data() {
    return {
        pickerOptions: {
            startDate: null,
            disabledDate: (time) => {
              if (
                this.pickerOptions.startDate === undefined ||
                this.pickerOptions.startDate === null
              ) {
                return time.getTime() < Date.now() - 8.64e7;
              } else {
                return 
                  time.getTime() < Date.now() - 8.64e7
              }
            },
            onPick: (dateRange) => {
              this.pickerOptions.startDate = dateRange.minDate;
              if (dateRange.maxDate) {
                this.pickerOptions.startDate = null;
              }
            },
      },
    }
}