饿了么UI 时间控件 el-date-picker时间范围限制

最新推荐文章于 2025-03-04 10:13:23 发布

_Eolin

最新推荐文章于 2025-03-04 10:13:23 发布

阅读量2.7k

点赞数

分类专栏： vue 笔记 element-ui 文章标签： vue.js element-ui

本文链接：https://blog.csdn.net/g2526/article/details/124340520

版权

在Vue.js 2.6和Element UI 2.13.2环境下，通过自定义`disabledDate`属性实现了日期选择器el-date-picker的时间范围限制。当选择一个日期后，用户只能选择该日期前后的31天，同时禁止选取当前时间之前的一天。具体实现代码包括在data中定义`pickerMinDate`和`pickerOptionsBegin`，通过`onPick`更新`pickerMinDate`，并计算允许的日期范围。

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

环境：vue:2.6 、element-ui: ^2.13.2

需求：需要在日期控件中限制选择31天，根据选择的第一个日期进行判断

组件代码：

<el-date-picker v-model="formInfo.startTime"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptionsBegin"
              >
              </el-date-picker

限制控制写在data中：

data() {

return {

pickerMinDate: "",

pickerOptionsBegin: {

onPick: (obj) => {

this.pickerMinDate = new Date(obj.minDate).getTime();

console.log(obj);

},

disabledDate: (time) => {