DateTimePicker 日期限制在某个范围内

最新推荐文章于 2024-09-06 15:59:52 发布

佛佛ง

最新推荐文章于 2024-09-06 15:59:52 发布

阅读量1k

点赞数

分类专栏： VUE 文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/LzzMandy/article/details/126471100

版权

VUE 专栏收录该内容

83 篇文章

订阅专栏

本文介绍了如何在 Vue 的 Element UI 中使用 el-date-picker 控件设置日期选择器的禁用日期范围，通过 disabledDate 函数实现指定日期不可选。

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

  <el-date-picker 
     v-model="value1" 
     type="datetime" 
     :picker-options="pickerOptions" 
     value-format="yyyy-MM-dd HH:mm:ss" 
     placeholder="选择时间"> 
  </el-date-picker>

picker-options

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

object

Picker Options

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

pickerOptions: {
    disabledDate(time) {
        return time.getTime() < new Date() - 1 * 24 * 60 * 60 * 1000 || time.getTime() > new Date().getTime() + 1 * 24 * 60 * 60 * 1000;
    }
},