feat(datepicker): 添加日期禁用功能,限制日期范围为一年内
- 新增 disabledDate 函数用于禁用超出当前日期前后一年范围的日期 - 在日期选择组件中绑定 disabledDate 函数 - 优化用户选择日期的有效范围,防止选取过早或过晚的日期 - 通过代码注释清晰说明禁用逻辑实现细节
This commit is contained in:
parent
ae4d69edb9
commit
849e77b401
|
|
@ -240,6 +240,7 @@
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
:shortcuts="dateShortcuts"
|
:shortcuts="dateShortcuts"
|
||||||
:default-time="dateDefaultTime"
|
:default-time="dateDefaultTime"
|
||||||
|
:disabled-date="disabledDate"
|
||||||
style="width:100%"
|
style="width:100%"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
|
||||||
14
web/main.js
14
web/main.js
|
|
@ -188,6 +188,19 @@ const app = createApp({
|
||||||
new Date(2000, 0, 1, 23, 59, 59),
|
new Date(2000, 0, 1, 23, 59, 59),
|
||||||
];
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 禁用超过一年的日期
|
||||||
|
* @param {Date} date - 要检查的日期
|
||||||
|
* @returns {boolean} 是否禁用
|
||||||
|
*/
|
||||||
|
const disabledDate = (date) => {
|
||||||
|
if (!date) return false;
|
||||||
|
const today = new Date();
|
||||||
|
const oneYearAgo = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());
|
||||||
|
const oneYearLater = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());
|
||||||
|
return date < oneYearAgo || date > oneYearLater;
|
||||||
|
};
|
||||||
|
|
||||||
const dateShortcuts = [
|
const dateShortcuts = [
|
||||||
{
|
{
|
||||||
text: '本日',
|
text: '本日',
|
||||||
|
|
@ -1010,6 +1023,7 @@ const app = createApp({
|
||||||
exportRules,
|
exportRules,
|
||||||
dateDefaultTime,
|
dateDefaultTime,
|
||||||
dateShortcuts,
|
dateShortcuts,
|
||||||
|
disabledDate,
|
||||||
// 表单引用
|
// 表单引用
|
||||||
createFormRef,
|
createFormRef,
|
||||||
editFormRef,
|
editFormRef,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue