ElementUI 日期控件禁止选择未来日期

最新推荐文章于 2024-05-14 16:27:26 发布

原创最新推荐文章于 2024-05-14 16:27:26 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

前端同时被 2 个专栏收录

44 篇文章

订阅专栏

vue

11 篇文章

订阅专栏

这篇博客介绍了如何在HTML中使用日期选择器组件，并通过JavaScript设置禁用日期选项，确保用户只能选择不超出当前日期的日期。具体实现方式是通过v-model、value-format属性配置，并在JavaScript中定义`qsrqOptions`，利用`disabledDate`函数判断时间是否超出当前日期。

在这里插入图片描述
HTML

            <el-date-picker
              v-model="queryDate"
              value-format="yyyyMMdd"
              type="date"
              placeholder="选择日期"
              :picker-options="qsrqOptions"
            />

JavaScript

      // 日期
      dataQueryForm: {
      	tjyd: ''
      	}
      // 禁止选择超出当前日期
      qsrqOptions: {
        disabledDate: time => {
          const self = this;
          if (self.dataQueryForm.tjyd ! == '') {
          	return time.getTime() > new Date(this.dataQueryForm.tjyd).getTime();
          	} else {
          		return time.getTime() > Date.now();
          	}
          }
      	},