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"
|
||||
:shortcuts="dateShortcuts"
|
||||
:default-time="dateDefaultTime"
|
||||
:disabled-date="disabledDate"
|
||||
style="width:100%"
|
||||
/>
|
||||
</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),
|
||||
];
|
||||
|
||||
/**
|
||||
* 禁用超过一年的日期
|
||||
* @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 = [
|
||||
{
|
||||
text: '本日',
|
||||
|
|
@ -1010,6 +1023,7 @@ const app = createApp({
|
|||
exportRules,
|
||||
dateDefaultTime,
|
||||
dateShortcuts,
|
||||
disabledDate,
|
||||
// 表单引用
|
||||
createFormRef,
|
||||
editFormRef,
|
||||
|
|
|
|||
Loading…
Reference in New Issue