el-date-picker 时间控件限制跨月选择日期

最新推荐文章于 2025-07-08 09:07:07 发布

hlyphard

最新推荐文章于 2025-07-08 09:07:07 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： el-elememt 文章标签：时间控件 js

本文链接：https://blog.youkuaiyun.com/hlyphard/article/details/102897268

el-elememt 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了Element UI中日期选择器的高级配置选项，包括快捷选项、禁用日期设置及自定义样式等功能，帮助开发者掌握更精细的日期选择控制。

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

picker-options

当前时间日期选择器特有的选项参考下表

shortcuts	设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表	Object[]	—	—
disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean	Function	—	—
cellClassName	设置日期的 className	Function(Date)	—	—
firstDayOfWeek	周起始日	Number	1 到 7	7

<el-date-picker
        :picker-options="pickerOptions"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>

pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime()
          if (maxDate) {
            this.choiceDate = ''
          }
        },
        disabledDate: (time) => {
          const self = this;
          if (!!self.choiceDate) {
            const startDay = (new Date(self.choiceDate).getDate() - 1) * 24 * 3600 * 1000;
            const endDay = (new Date(new Date(self.choiceDate).getFullYear(),new Date(self.choiceDate).getMonth() + 1,0).getDate() - new Date(self.choiceDate).getDate()) * 24 * 3600 * 1000;
            let minTime = self.choiceDate - startDay;
            let maxTime = self.choiceDate + endDay;
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      },