From 27280cfa80fc67223a38020d79cd89dbdf7bb325 Mon Sep 17 00:00:00 2001 From: Qiyao <38038523+huqiyao@users.noreply.github.com> Date: Fri, 18 Dec 2020 17:10:23 +0800 Subject: [PATCH] feat(datepicker): add disabled prop (#627) affects: @gio-design/components Co-authored-by: huqiyao Co-authored-by: Jack --- .../src/components/date-picker/datePicker.tsx | 11 ++++++++++- .../date-picker/dateRangePicker.tsx | 15 ++++++++++++--- .../src/components/date-picker/interface.tsx | 8 ++++++++ .../components/date-picker/style/index.less | 13 +++++++++++++ .../functional/date-picker/index.zh-CN.md | 19 +++++++++---------- 5 files changed, 52 insertions(+), 14 deletions(-) diff --git a/packages/components/src/components/date-picker/datePicker.tsx b/packages/components/src/components/date-picker/datePicker.tsx index a043865972..8380bc8f33 100644 --- a/packages/components/src/components/date-picker/datePicker.tsx +++ b/packages/components/src/components/date-picker/datePicker.tsx @@ -17,7 +17,15 @@ moment.locale('zh-cn', { }); const DatePicker: React.FC = (props: DatePickerProps) => { - const { prefixCls: customizePrefixCls, format = 'YYYY/MM/DD', value, defaultValue, showFooter, disabledDate } = props; + const { + prefixCls: customizePrefixCls, + format = 'YYYY/MM/DD', + value, + defaultValue, + showFooter, + disabledDate, + disabled, + } = props; const prefixCls = usePrefixCls('date-picker', customizePrefixCls); const calendarContainerRef = useRef(null); @@ -122,6 +130,7 @@ const DatePicker: React.FC = (props: DatePickerProps) => { onChange={handleInputChange} onClick={() => setOpen(true)} ref={inputRef} + disabled={disabled??false} />
diff --git a/packages/components/src/components/date-picker/dateRangePicker.tsx b/packages/components/src/components/date-picker/dateRangePicker.tsx index de5100863b..d7f2a68681 100644 --- a/packages/components/src/components/date-picker/dateRangePicker.tsx +++ b/packages/components/src/components/date-picker/dateRangePicker.tsx @@ -11,9 +11,16 @@ import Input from '../input'; import { DateRangePickerProps } from './interface'; const DateRangePicker: React.FC = (props: DateRangePickerProps) => { - const { prefixCls: customizePrefixCls, format = 'YYYY/MM/DD', value, defaultValue, showFooter, disabledDate } = props; + const { + prefixCls: customizePrefixCls, + format = 'YYYY/MM/DD', + value, + defaultValue, + showFooter, + disabledDate, + disabled, + } = props; const prefixCls = usePrefixCls('date-picker', customizePrefixCls); - const calendarContainerRef = useRef(null); const selectPanelRef = useRef(null); const [open, setOpen] = useState(false); @@ -142,12 +149,13 @@ const DateRangePicker: React.FC = (props: DateRangePickerP open={open} > {({ value: _value }: { value: Array }) => ( -
+
setOpen(true)} + disabled={disabled ?? false} /> — = (props: DateRangePickerP onChange={handleRightInputChange} value={rightInputTimeRange || `${formatDate(_value[1])}`} onClick={() => setOpen(true)} + disabled={disabled ?? false} />
diff --git a/packages/components/src/components/date-picker/interface.tsx b/packages/components/src/components/date-picker/interface.tsx index 22c6f648ee..393fe9e241 100644 --- a/packages/components/src/components/date-picker/interface.tsx +++ b/packages/components/src/components/date-picker/interface.tsx @@ -21,6 +21,10 @@ export interface DatePickerProps { 此受控组件绑定的时间 */ value: Moment; + /** + * 是否禁用 + */ + disabled?: boolean; /** 默认显示的时间 */ @@ -64,6 +68,10 @@ export interface DateRangePickerProps { 此受控组件绑定的时间 */ value: Array; + /** + * 是否禁用 + */ + disabled?: boolean; /** 面板切换的回调 */ diff --git a/packages/components/src/components/date-picker/style/index.less b/packages/components/src/components/date-picker/style/index.less index 85c9517132..0b25f67d7e 100644 --- a/packages/components/src/components/date-picker/style/index.less +++ b/packages/components/src/components/date-picker/style/index.less @@ -51,6 +51,19 @@ border-color: @color-border-input-hover; } +.@{date-picker-prefix-cls}-range-input.disabled { + color: @palette-black-2; + background-color: @palette-gray-1; +} + +.@{date-picker-prefix-cls}-range-input.disabled:focus { + border-color: @color-border-input-disable; +} + +.@{date-picker-prefix-cls}-range-input.disabled:hover { + border-color: @color-border-input-disable; +} + .@{date-picker-prefix-cls} { position: relative; top: 45px; diff --git a/packages/website/src/components/functional/date-picker/index.zh-CN.md b/packages/website/src/components/functional/date-picker/index.zh-CN.md index 056c285ae0..fd9ad26425 100644 --- a/packages/website/src/components/functional/date-picker/index.zh-CN.md +++ b/packages/website/src/components/functional/date-picker/index.zh-CN.md @@ -10,8 +10,6 @@ group: # DatePicker 日期选择器 - - ## 代码演示 @@ -20,11 +18,12 @@ group: ## 参数说明 -| 参数 | 说明 | 类型 | 默认值 | -| --------------- | ------------ | ---------------------------- | ------ | -| **disabledDate** | 禁止选择的时间 | Moment => boolean | | -| **showFooter** | 是否显示footer | boolean | true | -| **format** | 日期显示格式 | string | 'YYYY/MM/DD' | -| **onChange** | 面板切换的回调 | () => void | | -| **value** | 此受控组件绑定的时间 | `Array , Moment` | | - +| 参数 | 说明 | 类型 | 默认值 | +| ---------------- | -------------------- | ------------------------ | ------------ | +| **disabledDate** | 禁止选择的时间 | Moment => boolean | | +| **showFooter** | 是否显示 footer | boolean | true | +| **format** | 日期显示格式 | string | 'YYYY/MM/DD' | +| **onChange** | 面板切换的回调 | () => void | | +| **onSelect** | 选择日期的回调 | () => void | | +| **value** | 此受控组件绑定的时间 | `Array , Moment` | | +| **disabled** | 是否禁用 | boolean | false |