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 = () => {
+## Отключение интервалов
+
+Вы можете отключить интервалы или конкретные даты для выбора пользователем. Пример:
+
+
+
+```tsx
+import React, { useState } from 'react';
+import { DatePicker } from '@consta/uikit/DatePicker';
+
+const getDisableDates = (): Array => {
+ 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();
+
+ return (
+
+ );
+};
+```
+
+
+
+
+
## Управление состоянием выпадающего списка
Для управления состоянием выпадающего списка используйте следующие свойства:
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 => {
+ 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();
+
+ return (
+
+
+
+ );
+};
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(null);
return (
-
+
);
};
@@ -21,12 +16,7 @@ export const DatePickerExampleTypeDateRange = () => {
const [value, setValue] = useState<[Date?, Date?] | null>(null);
return (
-
+
);
};
@@ -35,12 +25,7 @@ export const DatePickerExampleTypeDateTime = () => {
const [value, setValue] = useState(null);
return (
-
+
);
};
@@ -49,12 +34,7 @@ export const DatePickerExampleTypeDateTimeRange = () => {
const [value, setValue] = useState<[Date?, Date?] | null>(null);
return (
-
+
);
};
@@ -91,12 +71,7 @@ export const DatePickerExampleTypeMonthRange = () => {
const [value, setValue] = useState<[Date?, Date?] | null>(null);
return (
-
+
);
};
@@ -105,12 +80,7 @@ export const DatePickerExampleTypeYear = () => {
const [value, setValue] = useState();
return (
-
+
);
};
@@ -119,12 +89,7 @@ export const DatePickerExampleTypeYearRange = () => {
const [value, setValue] = useState<[Date?, Date?] | null>(null);
return (
-
+
);
};
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 =
id?: string;
name?: DatePickerPropName;
disabled?: boolean;
+ disableDates?: DateTimePropDisableDates;
dropdownClassName?: string;
dropdownRef?: React.Ref;
size?: TextFieldPropSize;