From 99fbb2518aa20561e019d9835748d378c34a7f9f Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Tue, 1 Aug 2023 10:18:29 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A5=E6=9C=9F=E7=B1=BB=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=20disabl?= =?UTF-8?q?edDate=20=E7=94=A8js=E6=8E=A7=E5=88=B6=E5=93=AA=E4=BA=9B?= =?UTF-8?q?=E5=A4=A9=E4=B8=8D=E5=8F=AF=E7=82=B9=E9=80=89=20Close:=20#7593?= =?UTF-8?q?=20(#7639)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/input-date.md | 27 +++++++++++++++++++ docs/zh-CN/components/form/input-datetime.md | 27 +++++++++++++++++++ .../amis-ui/src/components/DatePicker.tsx | 8 +++++- .../renderers/Form/inputDate.test.tsx | 27 +++++++++++++++++++ .../amis/src/renderers/Form/InputDate.tsx | 26 +++++++++++++++++- 5 files changed, 113 insertions(+), 2 deletions(-) diff --git a/docs/zh-CN/components/form/input-date.md b/docs/zh-CN/components/form/input-date.md index a48e055af..0692d7f3c 100755 --- a/docs/zh-CN/components/form/input-date.md +++ b/docs/zh-CN/components/form/input-date.md @@ -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` | | 用字符函数来控制哪些天不可以被点选 | ## 事件表 diff --git a/docs/zh-CN/components/form/input-datetime.md b/docs/zh-CN/components/form/input-datetime.md index 50f671b95..bf8bc529c 100755 --- a/docs/zh-CN/components/form/input-datetime.md +++ b/docs/zh-CN/components/form/input-datetime.md @@ -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` | | 用字符函数来控制哪些天不可以被点选 | ## 事件表 diff --git a/packages/amis-ui/src/components/DatePicker.tsx b/packages/amis-ui/src/components/DatePicker.tsx index 3259a36a0..15a961f81 100644 --- a/packages/amis-ui/src/components/DatePicker.tsx +++ b/packages/amis-ui/src/components/DatePicker.tsx @@ -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 { } 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 { return false; } + if (typeof disabledDate === 'function') { + return !disabledDate(currentDate); + } + return true; } diff --git a/packages/amis/__tests__/renderers/Form/inputDate.test.tsx b/packages/amis/__tests__/renderers/Form/inputDate.test.tsx index 264380249..29052259c 100644 --- a/packages/amis/__tests__/renderers/Form/inputDate.test.tsx +++ b/packages/amis/__tests__/renderers/Form/inputDate.test.tsx @@ -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'); +}); diff --git a/packages/amis/src/renderers/Form/InputDate.tsx b/packages/amis/src/renderers/Form/InputDate.tsx index ca1994d00..3053ab207 100644 --- a/packages/amis/src/renderers/Form/InputDate.tsx +++ b/packages/amis/src/renderers/Form/InputDate.tsx @@ -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} /> );