feat(DatePicker): add disableDates (#3788)

closes #3787 --------- Co-authored-by: alyonurchick1 <[email protected]>
consta-design-system · Oct 23, 2024 · 5acafb7 · 5acafb7
1 parent 9e52d2f
commit 5acafb7
Show file tree

Hide file tree

Showing 14 changed files with 122 additions and 43 deletions.
diff --git a/src/components/DatePicker/DatePickerDropdown/DatePickerDropdown.tsx b/src/components/DatePicker/DatePickerDropdown/DatePickerDropdown.tsx
@@ -9,6 +9,7 @@ import {
   DateTimePropType,
   MoveType,
 } from '##/components/DateTime';
+import { DateTimePropDisableDates } from '##/components/DateTime/helpers/types';
 import { Direction, Popover } from '##/components/Popover';
 import { useFlag } from '##/hooks/useFlag';
 import { useForkRef } from '##/hooks/useForkRef';
@@ -49,6 +50,7 @@ export type DatePickerDropdownProps = PropsWithHTMLAttributesAndRef<
     multiplicityMinutes?: number;
     multiplicityHours?: number;
     timeFor?: 'start' | 'end';
+    disableDates?: DateTimePropDisableDates;
   },
   HTMLDivElement
 >;

diff --git a/src/components/DatePicker/DatePickerTypeDate/DatePickerTypeDate.tsx b/src/components/DatePicker/DatePickerTypeDate/DatePickerTypeDate.tsx
@@ -32,6 +32,7 @@ export const DatePickerTypeDate: DatePickerTypeComponent<'date'> = forwardRef(
       dropdownOpen,
       ignoreOutsideClicksRefs,
       disabled,
+      disableDates,
       inputRef: inputRefProp,
       ...otherProps
     } = props;

diff --git a/src/components/DatePicker/DatePickerTypeDateRange/DatePickerTypeDateRange.tsx b/src/components/DatePicker/DatePickerTypeDateRange/DatePickerTypeDateRange.tsx
@@ -51,6 +51,7 @@ export const DatePickerTypeDateRange: DatePickerTypeComponent<'date-range'> =
       dropdownOpen,
       ignoreOutsideClicksRefs,
       disabled,
+      disableDates,
       ...fieldProps
     } = props;
 
@@ -226,6 +227,7 @@ export const DatePickerTypeDateRange: DatePickerTypeComponent<'date-range'> =
           onChange={hadleChange}
           renderAdditionalControls={renderAdditionalControls}
           zIndex={getDropdownZIndex(props.style)}
+          disableDates={disableDates}
         />
       </>
     );

diff --git a/src/components/DatePicker/DatePickerTypeDateTime/DatePickerTypeDateTime.tsx b/src/components/DatePicker/DatePickerTypeDateTime/DatePickerTypeDateTime.tsx
@@ -40,6 +40,7 @@ export const DatePickerTypeDateTime: DatePickerTypeComponent<'date-time'> =
       ignoreOutsideClicksRefs,
       disabled,
       inputRef: inputRefProp,
+      disableDates,
       ...otherProps
     } = props;
 
@@ -141,6 +142,7 @@ export const DatePickerTypeDateTime: DatePickerTypeComponent<'date-time'> =
           multiplicitySeconds={multiplicitySeconds}
           multiplicityMinutes={multiplicityMinutes}
           zIndex={getDropdownZIndex(props.style)}
+          disableDates={disableDates}
         />
       </>
     );

diff --git a/src/components/DatePicker/DatePickerTypeDateTimeRange/DatePickerTypeDateTimeRange.tsx b/src/components/DatePicker/DatePickerTypeDateTimeRange/DatePickerTypeDateTimeRange.tsx
@@ -53,6 +53,7 @@ export const DatePickerTypeDateTimeRange: DatePickerTypeComponent<'date-time-ran
       dropdownOpen,
       ignoreOutsideClicksRefs,
       disabled,
+      disableDates,
       ...fieldProps
     } = props;
 
@@ -210,6 +211,7 @@ export const DatePickerTypeDateTimeRange: DatePickerTypeComponent<'date-time-ran
           multiplicitySeconds={multiplicitySeconds}
           multiplicityHours={multiplicityHours}
           zIndex={getDropdownZIndex(props.style)}
+          disableDates={disableDates}
         />
       </>
     );

diff --git a/src/components/DatePicker/DatePickerTypeMonth/DatePickerTypeMonth.tsx b/src/components/DatePicker/DatePickerTypeMonth/DatePickerTypeMonth.tsx
@@ -33,6 +33,7 @@ export const DatePickerTypeMonth: DatePickerTypeComponent<'month'> = forwardRef(
       ignoreOutsideClicksRefs,
       disabled,
       inputRef: inputRefProp,
+      disableDates,
       ...otherProps
     } = props;
 
@@ -122,6 +123,7 @@ export const DatePickerTypeMonth: DatePickerTypeComponent<'month'> = forwardRef(
           renderAdditionalControls={renderAdditionalControls}
           onChangeCurrentVisibleDate={setCurrentVisibleDate}
           zIndex={getDropdownZIndex(props.style)}
+          disableDates={disableDates}
         />
       </>
     );

diff --git a/src/components/DatePicker/DatePickerTypeMonthRange/DatePickerTypeMonthRange.tsx b/src/components/DatePicker/DatePickerTypeMonthRange/DatePickerTypeMonthRange.tsx
@@ -47,6 +47,7 @@ export const DatePickerTypeMonthRange: DatePickerTypeComponent<'month-range'> =
       dropdownOpen,
       ignoreOutsideClicksRefs,
       disabled,
+      disableDates,
       ...fieldProps
     } = props;
 
@@ -222,6 +223,7 @@ export const DatePickerTypeMonthRange: DatePickerTypeComponent<'month-range'> =
           onChange={hadleChange}
           renderAdditionalControls={renderAdditionalControls}
           zIndex={getDropdownZIndex(props.style)}
+          disableDates={disableDates}
         />
       </>
     );

diff --git a/src/components/DatePicker/DatePickerTypeTime/DatePickerTypeTime.tsx b/src/components/DatePicker/DatePickerTypeTime/DatePickerTypeTime.tsx
@@ -37,6 +37,7 @@ export const DatePickerTypeTime: DatePickerTypeComponent<'time'> = forwardRef(
       ignoreOutsideClicksRefs,
       disabled,
       inputRef: inputRefProp,
+      disableDates,
       ...otherProps
     } = props;
 
@@ -106,6 +107,7 @@ export const DatePickerTypeTime: DatePickerTypeComponent<'time'> = forwardRef(
           multiplicitySeconds={multiplicitySeconds}
           multiplicityMinutes={multiplicityMinutes}
           zIndex={getDropdownZIndex(props.style)}
+          disableDates={disableDates}
         />
       </>
     );

diff --git a/src/components/DatePicker/DatePickerTypeYear/DatePickerTypeYear.tsx b/src/components/DatePicker/DatePickerTypeYear/DatePickerTypeYear.tsx
@@ -32,6 +32,7 @@ export const DatePickerTypeYear: DatePickerTypeComponent<'year'> = forwardRef(
       disabled,
       ignoreOutsideClicksRefs,
       inputRef: inputRefProp,
+      disableDates,
       ...otherProps
     } = props;
 
@@ -122,6 +123,7 @@ export const DatePickerTypeYear: DatePickerTypeComponent<'year'> = forwardRef(
           renderAdditionalControls={renderAdditionalControls}
           zIndex={getDropdownZIndex(props.style)}
           onChangeCurrentVisibleDate={setCurrentVisibleDate}
+          disableDates={disableDates}
         />
       </>
     );

diff --git a/src/components/DatePicker/DatePickerTypeYearRange/DatePickerTypeYearRange.tsx b/src/components/DatePicker/DatePickerTypeYearRange/DatePickerTypeYearRange.tsx
@@ -40,6 +40,7 @@ export const DatePickerTypeYearRange: DatePickerTypeComponent<'date-range'> =
       dropdownOpen,
       ignoreOutsideClicksRefs,
       disabled,
+      disableDates,
       ...fieldProps
     } = props;
 
@@ -215,6 +216,7 @@ export const DatePickerTypeYearRange: DatePickerTypeComponent<'date-range'> =
           onChange={hadleChange}
           renderAdditionalControls={renderAdditionalControls}
           zIndex={getDropdownZIndex(props.style)}
+          disableDates={disableDates}
         />
       </>
     );

diff --git a/src/components/DatePicker/__stand__/DatePicker.dev.stand.mdx b/src/components/DatePicker/__stand__/DatePicker.dev.stand.mdx
@@ -25,7 +25,9 @@ import {
 import { DatePickerExampleMulti } from './examples/DatePickerExampleMulti/DatePickerExampleMulti';
 import { DatePickerExampleDropdownOpen } from './examples/DatePickerExampleDropdownOpen/DatePickerExampleDropdownOpen';
 import { DatePickerExampleTwoIcons } from './examples/DatePickerExampleTwoFields/DatePickerExampleTwoFields';
+import { DatePickerExampleDisableDates } from './examples/DatePickerExampleDisableDates/DatePickerExampleDisableDates';
 import { DatePickerExampleWithClearButton } from './examples/DatePickerExampleWithClearButton/DatePickerExampleWithClearButton';
+import { MdxTabs } from '@consta/stand';
 
 ```tsx
 import { DatePicker } from '@consta/uikit/DatePicker';
@@ -48,6 +50,7 @@ import { DatePicker } from '@consta/uikit/DatePicker';
   - [Два поля ввода](#два-поля-ввода-свойства-и-события)
   - [Кнопка для очистки поля](#кнопка-для-очистки-поля)
 - [Дополнительные контролы](#дополнительные-контролы)
+- [Отключение интервалов](#отключение-интервалов)
 - [Управление состоянием выпадающего списка](#управление-состоянием-выпадающего-списка)
 - [Обработка ошибок](#обработка-ошибок)
 - [Импорт](#импорт)
@@ -388,6 +391,54 @@ export const DatePickerExampleAdditionalControls = () => {
 
 <DatePickerExampleAdditionalControls />
 
+## Отключение интервалов
+
+Вы можете отключить интервалы или конкретные даты для выбора пользователем. Пример:
+
+<MdxTabs>
+
+```tsx
+import React, { useState } from 'react';
+import { DatePicker } from '@consta/uikit/DatePicker';
+
+const getDisableDates = (): Array<Date | [Date, Date]> => {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+  return [
+    // интервал времени текущей даты с 12:34:20 - 16:10:41
+    [
+      new Date(year, month, day, 12, 34, 20),
+      new Date(year, month, day, 16, 10, 41),
+    ],
+    // следующий день
+    new Date(year, month, day + 1),
+    // отключаем с 1-ого по 12-ое включительно
+    [new Date(year, month, 1), new Date(year, month, 13)],
+  ];
+};
+
+const disableDates = getDisableDates();
+
+export const DatePickerExampleDisableDates = () => {
+  const [value, setValue] = useState<Date | null>();
+
+  return (
+    <DatePicker
+      type="date-time"
+      value={value}
+      disableDates={disableDates}
+      onChange={setValue}
+    />
+  );
+};
+```
+
+<DatePickerExampleDisableDates />
+
+</MdxTabs>
+
 ## Управление состоянием выпадающего списка
 
 Для управления состоянием выпадающего списка используйте следующие свойства:

diff --git a/...Picker/__stand__/examples/DatePickerExampleDisableDates/DatePickerExampleDisableDates.tsx b/...Picker/__stand__/examples/DatePickerExampleDisableDates/DatePickerExampleDisableDates.tsx
@@ -0,0 +1,39 @@
+import { Example } from '@consta/stand';
+import React, { useState } from 'react';
+
+import { DatePicker } from '../../../DatePicker';
+
+const getDisableDates = (): Array<Date | [Date, Date]> => {
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+  return [
+    // интервал времени текущей даты с 12:34:20 - 16:10:41
+    [
+      new Date(year, month, day, 12, 34, 20),
+      new Date(year, month, day, 16, 10, 41),
+    ],
+    // слелдующий день
+    new Date(year, month, day + 1),
+    // отключаем с 1го по 12ое включительно
+    [new Date(year, month, 1), new Date(year, month, 13)],
+  ];
+};
+
+const disableDates = getDisableDates();
+
+export const DatePickerExampleDisableDates = () => {
+  const [value, setValue] = useState<Date | null>();
+
+  return (
+    <Example col={1}>
+      <DatePicker
+        type="date-time"
+        value={value}
+        disableDates={disableDates}
+        onChange={setValue}
+      />
+    </Example>
+  );
+};
diff --git a/src/components/DatePicker/__stand__/examples/DatePickerExampleType/DatePickerExampleType.tsx b/src/components/DatePicker/__stand__/examples/DatePickerExampleType/DatePickerExampleType.tsx
@@ -7,12 +7,7 @@ export const DatePickerExampleTypeDate = () => {
   const [value, setValue] = useState<Date | null>(null);
   return (
     <Example col={1}>
-      <DatePicker
-        type="date"
-        value={value}
-        onChange={setValue}
-        style={{ zIndex: 2 }}
-      />
+      <DatePicker type="date" value={value} onChange={setValue} />
     </Example>
   );
 };
@@ -21,12 +16,7 @@ export const DatePickerExampleTypeDateRange = () => {
   const [value, setValue] = useState<[Date?, Date?] | null>(null);
   return (
     <Example col={1}>
-      <DatePicker
-        type="date-range"
-        value={value}
-        onChange={setValue}
-        style={{ zIndex: 2 }}
-      />
+      <DatePicker type="date-range" value={value} onChange={setValue} />
     </Example>
   );
 };
@@ -35,12 +25,7 @@ export const DatePickerExampleTypeDateTime = () => {
   const [value, setValue] = useState<Date | null>(null);
   return (
     <Example col={1}>
-      <DatePicker
-        type="date-time"
-        value={value}
-        onChange={setValue}
-        style={{ zIndex: 2 }}
-      />
+      <DatePicker type="date-time" value={value} onChange={setValue} />
     </Example>
   );
 };
@@ -49,12 +34,7 @@ export const DatePickerExampleTypeDateTimeRange = () => {
   const [value, setValue] = useState<[Date?, Date?] | null>(null);
   return (
     <Example col={1}>
-      <DatePicker
-        type="date-time-range"
-        value={value}
-        onChange={setValue}
-        style={{ zIndex: 2 }}
-      />
+      <DatePicker type="date-time-range" value={value} onChange={setValue} />
     </Example>
   );
 };
@@ -91,12 +71,7 @@ export const DatePickerExampleTypeMonthRange = () => {
   const [value, setValue] = useState<[Date?, Date?] | null>(null);
   return (
     <Example col={1}>
-      <DatePicker
-        type="month-range"
-        value={value}
-        onChange={setValue}
-        style={{ zIndex: 2 }}
-      />
+      <DatePicker type="month-range" value={value} onChange={setValue} />
     </Example>
   );
 };
@@ -105,12 +80,7 @@ export const DatePickerExampleTypeYear = () => {
   const [value, setValue] = useState<Date | null>();
   return (
     <Example col={1}>
-      <DatePicker
-        type="year"
-        value={value}
-        onChange={setValue}
-        style={{ zIndex: 2 }}
-      />
+      <DatePicker type="year" value={value} onChange={setValue} />
     </Example>
   );
 };
@@ -119,12 +89,7 @@ export const DatePickerExampleTypeYearRange = () => {
   const [value, setValue] = useState<[Date?, Date?] | null>(null);
   return (
     <Example col={1}>
-      <DatePicker
-        type="year-range"
-        value={value}
-        onChange={setValue}
-        style={{ zIndex: 2 }}
-      />
+      <DatePicker type="year-range" value={value} onChange={setValue} />
     </Example>
   );
 };
diff --git a/src/components/DatePicker/types.ts b/src/components/DatePicker/types.ts
@@ -3,7 +3,11 @@ import { Locale } from 'date-fns';
 
 import { DateRange } from '../../utils/types/Date';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
-import { DateTimePropView, dateTimePropViewDefault } from '../DateTime/helpers';
+import {
+  DateTimePropDisableDates,
+  DateTimePropView,
+  dateTimePropViewDefault,
+} from '../DateTime/helpers';
 import {
   TextFieldPropForm,
   TextFieldPropSize,
@@ -110,6 +114,7 @@ export type DatePickerProps<TYPE extends DatePickerPropType = 'date'> =
       id?: string;
       name?: DatePickerPropName<TYPE>;
       disabled?: boolean;
+      disableDates?: DateTimePropDisableDates;
       dropdownClassName?: string;
       dropdownRef?: React.Ref<HTMLDivElement>;
       size?: TextFieldPropSize;