feat(datepicker): add disabled prop (#627)

affects: @gio-design/components Co-authored-by: huqiyao <[email protected]> Co-authored-by: Jack <[email protected]>
growingio · Dec 18, 2020 · 27280cf · 27280cf · vercel · Dec 18, 2020
1 parent 1b3b340
commit 27280cf
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 14 deletions.
diff --git 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<DatePickerProps> = (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<DatePickerProps> = (props: DatePickerProps) => {
               onChange={handleInputChange}
               onClick={() => setOpen(true)}
               ref={inputRef}
+              disabled={disabled??false}
             />
             <div ref={calendarContainerRef} className={classNames(`${prefixCls}-wrapper`)} />
           </>

diff --git 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<DateRangePickerProps> = (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<any>(null);
   const [open, setOpen] = useState(false);
@@ -142,19 +149,21 @@ const DateRangePicker: React.FC<DateRangePickerProps> = (props: DateRangePickerP
         open={open}
       >
         {({ value: _value }: { value: Array<Moment> }) => (
-          <div className={classNames(`${prefixCls}-range-input`)}>
+          <div className={classNames(`${prefixCls}-range-input`, { disabled })}>
             <Input
               placeholder="please select"
               onChange={handleLeftInputChange}
               value={leftInputTimeRange || `${formatDate(_value[0])}`}
               onClick={() => setOpen(true)}
+              disabled={disabled ?? false}
             />
             <span className={`${prefixCls}-split`}>—</span>
             <Input
               placeholder="please select"
               onChange={handleRightInputChange}
               value={rightInputTimeRange || `${formatDate(_value[1])}`}
               onClick={() => setOpen(true)}
+              disabled={disabled ?? false}
             />
             <div ref={calendarContainerRef} className={classNames(`${prefixCls}-wrapper`)} />
           </div>

diff --git 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<Moment>;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
   /**
    面板切换的回调
    */

diff --git 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
@@ -10,8 +10,6 @@ group:
 
 # DatePicker 日期选择器
 
-
-
 ## 代码演示
 
 <code src='./demo/base.tsx'  title='日期选择器' desc='选择某一天' />
@@ -20,11 +18,12 @@ group:
 
 ## 参数说明
 
-| 参数            | 说明         | 类型                         | 默认值 |
-| --------------- | ------------ | ---------------------------- | ------ |
-| **disabledDate** | 禁止选择的时间 | Moment => boolean |        |
-| **showFooter**  | 是否显示footer | boolean |    true    |
-| **format**  | 日期显示格式 | string |    'YYYY/MM/DD'    |
-| **onChange**  | 面板切换的回调 | () => void |        |
-| **value**  | 此受控组件绑定的时间 | `Array<Moment> , Moment`  |        |
-
+| 参数             | 说明                 | 类型                     | 默认值       |
+| ---------------- | -------------------- | ------------------------ | ------------ |
+| **disabledDate** | 禁止选择的时间       | Moment => boolean        |              |
+| **showFooter**   | 是否显示 footer      | boolean                  | true         |
+| **format**       | 日期显示格式         | string                   | 'YYYY/MM/DD' |
+| **onChange**     | 面板切换的回调       | () => void               |              |
+| **onSelect**     | 选择日期的回调       | () => void               |              |
+| **value**        | 此受控组件绑定的时间 | `Array<Moment> , Moment` |              |
+| **disabled**     | 是否禁用             | boolean                  | false        |