test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:39:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: 日期类选择器支持配置 disabledDate 用js控制哪些天不可点选 Close: #7593 (#7639)

Browse Source
This commit is contained in:
liaoxuezhi 2023-08-01 10:18:29 +08:00 committed by GitHub
parent 28a90d94dd
commit 99fbb2518a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 113 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
docs/zh-CN/components/form/input-date.md
View File

@ -244,6 +244,32 @@ order: 13
}
```
### 通过 js 来控制
> 3.3.0 及以上版本
可以通过 `disabledDate` 字符函数来控制，比如不允许选择周一、周六、周日
函数签名: `(currentDate: moment.Moment, props: any) => boolean`
示例： `"return currentDate.day() == 1 || currentDate.day() == 0 || currentDate.day() == 6"`
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-date",
"name": "start",
"label": "开始时间",
"description": "限制不能选周一、周六、周日",
"disabledDate": "return currentDate.day() == 1 || currentDate.day() == 0 || currentDate.day() == 6"
}
]
}
```
## 快捷键
你也可以配置`shortcuts`属性支持快捷选择日期
@ -399,6 +425,7 @@ order: 13
| utc | `boolean` | `false` | 保存 utc 值 |
| clearable | `boolean` | `true` | 是否可清除 |
| embed | `boolean` | `false` | 是否内联模式 |
| disabledDate | `string` | | 用字符函数来控制哪些天不可以被点选 |
## 事件表

27
docs/zh-CN/components/form/input-datetime.md
View File

@ -248,6 +248,32 @@ order: 14
}
```
### 通过 js 来控制
> 3.3.0 及以上版本
可以通过 `disabledDate` 字符函数来控制，比如不允许选择周一、周六、周日
函数签名: `(currentDate: moment.Moment, props: any) => boolean`
示例： `"return currentDate.day() == 1 || currentDate.day() == 0 || currentDate.day() == 6"`
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-datetime",
"name": "start",
"label": "开始时间",
"description": "限制不能选周一、周六、周日",
"disabledDate": "return currentDate.day() == 1 || currentDate.day() == 0 || currentDate.day() == 6"
}
]
}
```
## 快捷键
你也可以配置`shortcuts`属性支持快捷选择日期
@ -371,6 +397,7 @@ order: 14
| embed | `boolean` | `false` | 是否内联 |
| timeConstraints | `object` | `true` | 请参考 [input-time](./input-time#控制输入范围) 里的说明 |
| isEndDate | `boolean` | `false` | 如果配置为 true，会自动默认为 23:59:59 秒 |
| disabledDate | `string` | | 用字符函数来控制哪些天不可以被点选 |
## 事件表

8
packages/amis-ui/src/components/DatePicker.tsx
View File

@ -313,6 +313,8 @@ export interface DateProps extends LocaleProps, ThemeProps {
// 是否为结束时间
isEndDate?: boolean;
disabledDate?: (date: moment.Moment) => any;
}
export interface DatePickerState {
@ -587,7 +589,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
}
checkIsValidDate(currentDate: moment.Moment) {
const {minDate, maxDate} = this.props;
const {minDate, maxDate, disabledDate} = this.props;
if (minDate && currentDate.isBefore(minDate, 'day')) {
return false;
@ -595,6 +597,10 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
return false;
}
if (typeof disabledDate === 'function') {
return !disabledDate(currentDate);
}
return true;
}

27
packages/amis/__tests__/renderers/Form/inputDate.test.tsx
View File

@ -437,3 +437,30 @@ test('Renderer:inputDate with closeOnSelect', async () => {
conDontClose.querySelector('.cxd-PopOver.cxd-DatePicker-popover')
).toBeInTheDocument();
});
test('Renderer:inputDate disabledDate', async () => {
const {container} = await setup([
{
type: 'input-date',
name: 'date',
label: '日期',
format: 'YYYY-MM-DD',
disabledDate: 'return currentDate.day() == 1'
}
]);
// 打开弹框
fireEvent.click(container.querySelector('.cxd-DatePicker') as HTMLElement);
const monday = moment().day(1);
const tuesday = moment().day(2);
const mondayCell = container.querySelector(
'.cxd-DatePicker-popover tr td[data-value="' + monday.date() + '"]'
) as HTMLElement;
const tuesdayCell = container.querySelector(
'.cxd-DatePicker-popover tr td[data-value="' + tuesday.date() + '"]'
) as HTMLElement;
expect(mondayCell).toHaveClass('rdtDisabled');
expect(tuesdayCell).not.toHaveClass('rdtDisabled');
});

26
packages/amis/src/renderers/Form/InputDate.tsx
View File

@ -3,7 +3,8 @@ import {
FormItem,
FormControlProps,
FormBaseControl,
resolveEventData
resolveEventData,
str2function
} from 'amis-core';
import cx from 'classnames';
import {filterDate, isPureVariable, resolveVariableAndFilter} from 'amis-core';
@ -62,6 +63,13 @@ export interface InputDateBaseControlSchema extends FormBaseControlSchema {
* 日期快捷键
*/
shortcuts?: string | ShortCuts[];
/**
* 字符串函数，用来决定是否禁用某个日期。
*
* (currentDate: moment.Moment, props: any) => boolean;
*/
disabledDate?: string;
}
/**
@ -473,6 +481,21 @@ export default class DateControl extends React.PureComponent<
this.props.onChange(nextValue);
}
@autobind
isDisabledDate(currentDate: moment.Moment) {
const {disabledDate} = this.props;
const fn =
typeof disabledDate === 'string'
? str2function(disabledDate, 'currentDate', 'props')
: disabledDate;
if (typeof fn === 'function') {
return fn(currentDate, this.props);
}
return false;
}
@supportStatic()
render() {
let {
@ -534,6 +557,7 @@ export default class DateControl extends React.PureComponent<
onChange={this.handleChange}
onFocus={this.dispatchEvent}
onBlur={this.dispatchEvent}
disabledDate={this.isDisabledDate}
/>
</div>
);