From 5acafb7cfeea97d53ff5476f102db21bb3b57173 Mon Sep 17 00:00:00 2001
From: gizeasy <gizeasy@gmail.com>
Date: Wed, 23 Oct 2024 12:50:00 +0300
Subject: [PATCH] feat(DatePicker): add disableDates (#3788)

closes #3787

---------

Co-authored-by: alyonurchick1 <Alyonurchick1@yandex.ru>
---
 .../DatePickerDropdown/DatePickerDropdown.tsx |  2 +
 .../DatePickerTypeDate/DatePickerTypeDate.tsx |  1 +
 .../DatePickerTypeDateRange.tsx               |  2 +
 .../DatePickerTypeDateTime.tsx                |  2 +
 .../DatePickerTypeDateTimeRange.tsx           |  2 +
 .../DatePickerTypeMonth.tsx                   |  2 +
 .../DatePickerTypeMonthRange.tsx              |  2 +
 .../DatePickerTypeTime/DatePickerTypeTime.tsx |  2 +
 .../DatePickerTypeYear/DatePickerTypeYear.tsx |  2 +
 .../DatePickerTypeYearRange.tsx               |  2 +
 .../__stand__/DatePicker.dev.stand.mdx        | 51 +++++++++++++++++++
 .../DatePickerExampleDisableDates.tsx         | 39 ++++++++++++++
 .../DatePickerExampleType.tsx                 | 49 +++---------------
 src/components/DatePicker/types.ts            |  7 ++-
 14 files changed, 122 insertions(+), 43 deletions(-)
 create mode 100644 src/components/DatePicker/__stand__/examples/DatePickerExampleDisableDates/DatePickerExampleDisableDates.tsx

diff --git a/src/components/DatePicker/DatePickerDropdown/DatePickerDropdown.tsx b/src/components/DatePicker/DatePickerDropdown/DatePickerDropdown.tsx
index e65bff58b..f861f0960 100644
--- 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
index ad42e9669..2f3af44bc 100644
--- 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
index c86b50264..d7ee72762 100644
--- 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
index 2eb6e30dc..b7a1bd9d1 100644
--- 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
index 436dfd93a..d9327ddc2 100644
--- 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
index 40bf2cb0a..f899a78c5 100644
--- 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
index f54bff8c1..5f634316f 100644
--- 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
index dbd1a861e..3685cef67 100644
--- 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
index a79c5cea6..8e716a27c 100644
--- 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
index e7a038046..043f0c096 100644
--- 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
index 02022a777..c119b0cd0 100644
--- 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/src/components/DatePicker/__stand__/examples/DatePickerExampleDisableDates/DatePickerExampleDisableDates.tsx b/src/components/DatePicker/__stand__/examples/DatePickerExampleDisableDates/DatePickerExampleDisableDates.tsx
new file mode 100644
index 000000000..d497b022e
--- /dev/null
+++ b/src/components/DatePicker/__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
index 7aa12ea2a..b569cbe09 100644
--- 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
index 50ae6a486..b69eab86b 100644
--- 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;