el-datepicker限制只能选时间跨度1年的。

文章介绍了如何在表单中使用El-DateTime组件实现时间范围选择,重点讲解了如何设置pickerOptions,包括禁用日期范围和自定义日期限制,确保用户只能选择过去一年的时间段。

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

 <!-- 时间选择器 -->
                <el-form-item label="创建时间" :key="clearIndex" class="timeInfo">
                    <td-date-time v-model="datas" :pickerOptions="pickerOptions" :editable='false' type="daterange" valueFormat="yyyy-MM-dd" @change="clearTime" :separator="$t('accountability.TO')"
                    :start-placeholder="$t('licenseCommon.START_TIME')" :end-placeholder="$t('licenseCommon.END_TIME')"></td-date-time>
                </el-form-item>


            // 时间跨度为之前一年
            pickerOptions: {
                disabledDate: () => false,
                onPick: ({ maxDate, minDate }) => {
                  if (minDate && !maxDate) {
                    const oneYear = 365 * 24 * 60 * 60 * 1000;
                    this.pickerOptions.disabledDate = time => {
                      return time.getTime() < minDate.getTime() || time.getTime() > minDate.getTime() + oneYear;
                    };
                  } else {
                    this.pickerOptions.disabledDate = () => false;
                  }
                },
            },

我自己封装过一遍了,重点看pikerOptions。

### Element UI Datepicker 使用指南 Element UI 的 `el-date-picker` 是一个功能强大的组件,用于择日期或日期范围。以下是关于其常见配置和问题解决的方法。 #### 1. 基本属性说明 `el-date-picker` 提供了许多可参数来满足不同的需求。以下是一些常用的属性及其作用: - **v-model**: 绑定到 Vue 数据模型中的变量,表示当前定的日期。 - **type**: 定义日期择器的行为模式,例如 `"date"` 表示单日历视图,而 `"daterange"` 表示双日历视图以择起始和结束日期[^1]。 - **placeholder**: 输入框占位符文字提示用户输入内容。 - **format**: 显示在页面上的日期格式样式。 - **value-format**: 返回给绑定数据的实际日期格式[^3]。 ```vue <el-date-picker v-model="selectedDate" type="date" placeholder="请择日期" format="yyyy MM 月 dd 日" value-format="timestamp"> </el-date-picker> ``` #### 2. 处理错误:Prop being mutated “placement” 当遇到类似于“Prop being mutated”的警告时,通常是因为父级传递下来的 props 被子组件修改了。这违反了 Vue 单向数据流的原则。解决方案可以通过创建局部副本或者升级至最新版 Element UI 来规避此问题[^4]。 如果确认是版本差异引起,则需检查项目的 package.json 文件中指定的 element-ui 版本号,并更新依赖项: ```bash npm install element-ui@latest --save ``` #### 3. 关于 el-date-picker 点击失效的情况 有时会发现即使设置了正确的事件监听函数,在实际交互过程中仍然无法触发预期效果。这种情况可能源于第三方库(如 moment.js)与 vue-element-admin 框架之间的冲突所致[^3]。建议尝试移除不必要的外部插件加载逻辑并重新测试。 另外需要注意的是,某些浏览器扩展也可能干扰正常运行流程;关闭开发者工具内的所有附加组件后再做验证不失为一种有效手段。 --- ### 相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值