# DatePicker Props (свойства) для компонента DatePicker: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"readOnly","type":{"name":"boolean"}},{"name":"requiredPlacement","type":{"name":"enum","raw":"\"right\" | \"left\"","value":[{"value":"\"right\""},{"value":"\"left\""}]}},{"name":"required","type":{"name":"boolean"}},{"name":"hasRequiredIndicator","type":{"name":"boolean"}},{"name":"value","type":{"name":"string | Date"}},{"name":"preserveInvalidOnBlur","type":{"name":"boolean"}},{"name":"defaultDate","type":{"name":"Date"}},{"name":"placeholder","type":{"name":"string"}},{"name":"name","type":{"name":"string"}},{"name":"valueError","type":{"name":"boolean"}},{"name":"valueSuccess","type":{"name":"boolean"}},{"name":"leftHelper","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"contentRight","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"textBefore","type":{"name":"string"}},{"name":"textAfter","type":{"name":"string"}},{"name":"autoComplete","type":{"name":"string"}},{"name":"onCommitDate","type":{"name":"((value: string | Date, error?: boolean, success?: boolean, dateInfo?: DateInfo | undefined, originalDate?: Date | undefined, isoDate?: string | undefined) => void) | undefined"}},{"name":"onChangeValue","type":{"name":"((event: SyntheticEvent<HTMLInputElement, Event> | null, value?: string, originalDate?: DateType, isoDate?: string) => void) | undefined"}},{"name":"onChange","type":{"name":"(((event: { target: { value?: string; name?: string; originalDate?: DateType; isoDate?: string | undefined; }; }) => void) & FormEventHandler<HTMLDivElement>) | undefined"}},{"name":"label","type":{"name":"string"}},{"name":"labelPlacement","type":{"name":"string"}},{"name":"keepPlaceholder","type":{"name":"boolean"}},{"name":"format","type":{"name":"string"}},{"name":"maskWithFormat","type":{"name":"boolean"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"lang","type":{"name":"enum","raw":"\"ru\" | \"en\"","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"calendarContainerWidth","type":{"name":"string | number"}},{"name":"calendarContainerHeight","type":{"name":"string | number"}},{"name":"stretched","type":{"name":"boolean"}},{"name":"isOpen","type":{"name":"boolean"}},{"name":"opened","type":{"name":"boolean"}},{"name":"placement","type":{"name":"DatePickerPlacement | DatePickerPlacementBasic[]"}},{"name":"offset","type":{"name":"[number, number]"}},{"name":"frame","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"zIndex","type":{"name":"string"}},{"name":"closeOnOverlayClick","type":{"name":"boolean"}},{"name":"closeOnEsc","type":{"name":"boolean"}},{"name":"usePortal","type":{"name":"boolean"}},{"name":"closeAfterDateSelect","type":{"name":"boolean"}},{"name":"onToggle","type":{"name":"((isOpen: boolean, event?: Event | SyntheticEvent<Element, Event>) => void)"}}] ## Использование Компонент  `DatePicker`  представляет собой поле ввода даты с выпадающим календарем. ### Размер компонента Размер  `DatePicker`  задаётся с помощью свойства  `size` .
Возможные значения свойства:  `"l"` ,  `"m"` ,  `"s"` ,  `"xs"` .
```tsx
import React from 'react';
import { DatePicker } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
export function App() {
return (
<div>
<DatePicker
label="Лейбл"
leftHelper="Подсказка к полю"
placeholder="Введите дату"
contentRight={<IconDone size="s" />}
size="l"
usePortal
/>
</div>
);
}
```
### Формат даты Формат даты задается с помощью свойства  `format` .
| Обозначение | Отображение                           | Описание                         |
|-------------|---------------------------------------|----------------------------------|
| DD          | 01-31                                 | Дни месяца, 2 цифры              |
| D           | 1-31                                  | Дни месяца                       |
| MMMM        | January...December / январь...декабрь | Месяц года, полное название      |
| MMM         | Jan...Dec / янв.-дек.                 | Месяц года, сокращенное название |
| MM          | 01-12                                 | Месяц года, 2 цифры              |
| M           | 1-12                                  | Месяц года                       |
| YYYY        | 2024                                  | Год из 4 цифр                    |
| YY          | 24                                    | Год из 2 цифр                    |
| Q           | 1-4                                   | Квартал                          | При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату.
Свойство  `maskWithFormat`  позволяет маскировать ввод, кроме случаев когда месяц имеет формат полной записи MMMM:
```tsx
import React from 'react';
import { DatePicker } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
export function App() {
return (
<div>
<DatePicker
label="Лейбл"
leftHelper="Подсказка к полю"
placeholder="Введите дату"
format="DD-MM-YYYY"
maskWithFormat
contentRight={<IconDone size="s" />}
usePortal
/>
</div>
);
}
```
### Язык даты Язык даты задается с помощью свойства  `lang` . | Обозначение | Отображение | Описание            |
|-------------|-------------|---------------------|
| ru          | June        | Английский Язык     |
| en          | июнь        | Русский язык        | По умолчанию используется  `ru`
```tsx
import React from 'react';
import { DatePicker } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
export function App() {
return (
<div>
<DatePicker
label="Лейбл"
leftHelper="Подсказка к полю"
contentRight={<IconDone size="s" />}
placeholder="Введите дату"
format="DD MMMM YYYY"
lang="en"
maskWithFormat
usePortal
/>
</div>
);
}
```
### Валидация и индикация успешного ввода даты. За индикацию ошибки или успешного ввода отвечают  `valueError` ,  `valueSuccess` .
В данном примере валидация происходит при нажатии клавиши  `Enter`  после ввода значений:
```tsx
import React, {useState} from 'react';
import { DatePicker } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
export function App() {
const [isOpen, setIsOpen] = useState(false);
const [error, setError] = useState(false);
const [success, setSuccess] = useState(false);
const handleCommitDate = (newDate: Date | string, dateError?: boolean, dateSuccess?: boolean) => {
if (dateError) {
setError(true);
return;
}
if (dateSuccess) {
setSuccess(true);
}
setIsOpen(false);
};
return (
<div>
<DatePicker
opened={isOpen}
label="Лейбл"
leftHelper="Подсказка к полю"
placeholder="Введите дату"
format="DD-MM-YYYY"
maskWithFormat
valueError={error}
valueSuccess={success}
contentRight={<IconDone size="s" />}
onChangeValue={() => {
setError(false);
setSuccess(false);
}}
onCommitDate={handleCommitDate}
usePortal
/>
</div>
);
}
```
### Обязательность поля :::tip
Наличие индикатора регулируется свойством  `hasRequiredIndicator` .
::: Обязательность поля задаётся с помощью свойства  `required` .
Если поле является обязательным, то у компонента появляется специальный индикатор.
Изменить расположение индикатора можно с помощью свойства  `requiredPlacement` , которое принимает значения  `left`  и  `right` .
```tsx
import React from 'react';
import { DatePicker, IconButton } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
export function App() {
const ActionButton = () => {
return (
<IconButton view="clear" size="l">
<IconDone size="s" />
</IconButton>
);
};
return (
<div>
<DatePicker
label="Лейбл"
leftHelper="Подсказка к полю"
placeholder="Введите дату"
format="DD MMMM YYYY"
contentRight={<ActionButton />}
required
requiredPlacement="right"
/>
</div>
);
}
```
## DatePickerRange Props (свойства) для компонента DatePickerRange: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"readOnly","type":{"name":"boolean"}},{"name":"requiredPlacement","type":{"name":"enum","raw":"\"right\" | \"left\"","value":[{"value":"\"right\""},{"value":"\"left\""}]}},{"name":"required","type":{"name":"boolean"}},{"name":"hasRequiredIndicator","type":{"name":"boolean"}},{"name":"value","type":{"name":"[string | DateType, string | DateType]"}},{"name":"preserveInvalidOnBlur","type":{"name":"boolean"}},{"name":"defaultFirstDate","type":{"name":"Date"}},{"name":"defaultSecondDate","type":{"name":"Date"}},{"name":"name","type":{"name":"string"}},{"name":"onChangeFirstValue","type":{"name":"ChangeInstanceCallback"}},{"name":"onChangeSecondValue","type":{"name":"ChangeInstanceCallback"}},{"name":"onCommitFirstDate","type":{"name":"CommitInstanceCallback"}},{"name":"onCommitSecondDate","type":{"name":"CommitInstanceCallback"}},{"name":"onChange","type":{"name":"(((event: { target: { value?: string; name?: string; }; }) => void) & FormEventHandler<HTMLDivElement>) | undefined"}},{"name":"label","type":{"name":"string"}},{"name":"autoComplete","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"contentRight","type":{"name":"ReactNode"}},{"name":"leftHelper","type":{"name":"string"}},{"name":"firstValueError","type":{"name":"boolean"}},{"name":"secondValueError","type":{"name":"boolean"}},{"name":"firstValueSuccess","type":{"name":"boolean"}},{"name":"secondValueSuccess","type":{"name":"boolean"}},{"name":"firstPlaceholder","type":{"name":"string"}},{"name":"secondPlaceholder","type":{"name":"string"}},{"name":"firstTextfieldContentLeft","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"firstTextfieldContentRight","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"secondTextfieldContentLeft","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"secondTextfieldContentRight","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"firstTextfieldTextAfter","type":{"name":"string"}},{"name":"secondTextfieldTextAfter","type":{"name":"string"}},{"name":"onFocusFirstTextfield","type":{"name":"((event: FocusEvent<HTMLInputElement, Element>) => void)"}},{"name":"onFocusSecondTextfield","type":{"name":"((event: FocusEvent<HTMLInputElement, Element>) => void)"}},{"name":"onBlurFirstTextfield","type":{"name":"((event: FocusEvent<HTMLInputElement, Element>) => void)"}},{"name":"onBlurSecondTextfield","type":{"name":"((event: FocusEvent<HTMLInputElement, Element>) => void)"}},{"name":"firstTextfieldTextBefore","type":{"name":"string"}},{"name":"secondTextfieldTextBefore","type":{"name":"string"}},{"name":"dividerVariant","type":{"name":"enum","raw":"\"none\" | \"icon\" | \"dash\"","value":[{"value":"\"none\""},{"value":"\"icon\""},{"value":"\"dash\""}]}},{"name":"dividerIcon","type":{"name":"ReactNode"}},{"name":"format","type":{"name":"string"}},{"name":"maskWithFormat","type":{"name":"boolean"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"lang","type":{"name":"enum","raw":"\"ru\" | \"en\"","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"calendarContainerWidth","type":{"name":"string | number"}},{"name":"calendarContainerHeight","type":{"name":"string | number"}},{"name":"stretched","type":{"name":"boolean"}},{"name":"opened","type":{"name":"boolean"}},{"name":"offset","type":{"name":"[number, number]"}},{"name":"frame","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"onToggle","type":{"name":"((isOpen: boolean, event?: Event | SyntheticEvent<Element, Event>) => void)"}},{"name":"zIndex","type":{"name":"string"}},{"name":"usePortal","type":{"name":"boolean"}},{"name":"closeOnOverlayClick","type":{"name":"boolean"}},{"name":"isOpen","type":{"name":"boolean"}},{"name":"closeOnEsc","type":{"name":"boolean"}},{"name":"closeAfterDateSelect","type":{"name":"boolean"}},{"name":"placement","type":{"name":"DatePickerRangePlacement | DatePickerRangePlacementBasic[]"}},{"name":"isDoubleCalendar","type":{"name":"boolean"}}] Компонент  `DatePickerRange`  представляет собой  `Range`  с выпадающим календарем.
Календарь может быть одиночным или двойным. За это отвечает свойство  `isDoubleCalendar` .
```tsx
import React from 'react';
import { DatePickerRange, IconButton } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
export function App() {
const ActionButton = () => {
return (
<IconButton view="clear" size="l">
<IconDone size="s" />
</IconButton>
);
};
return (
<div>
<DatePickerRange
size="l"
label="Лейбл"
leftHelper="Подсказка к полю"
firstPlaceholder="Введите дату 1"
secondPlaceholder="Введите дату 2"
contentRight={<ActionButton />}
isDoubleCalendar
usePortal
/>
</div>
);
}
```
## Контролируемый вариант компонента Для передачи текущего значения необходимо использовать свойство  `value` .
Чтобы отслеживать изменения, полученные в поле ввода необходимо использовать  `onChangeValue` .
Свойство  `onCommitDate`  вызывается, когда выбор даты сделан с помощью выпадающего календарая
или же в поле ввода введена корректная дата.
```tsx
import React, {useState} from 'react';
import { DatePicker } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
export function App() {
const [dateValue, setDate] = useState<Date | string | undefined>(new Date());
const [originalDateValue, setOriginalDate] = useState<Date | string | null | undefined>(new Date());
const [isoDateValue, setIsoDate] = useState<string | undefined>(new Date().toISOString());
const handleChangeValue = (
_: React.SyntheticEvent<HTMLInputElement> | null,
value?: string,
originalDate?: Date | string | null,
isoDate?: string,
) => {
setDate(value);
setOriginalDate(originalDate);
setIsoDate(isoDate);
};
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '3rem'}}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem'}}>
<p>Значение date: {String(dateValue)}</p>
<p>Значение originalDate: {String(originalDateValue)}</p>
<p>Значение isoDate: {isoDateValue}</p>
</div>
<DatePicker
value={dateValue}
onChangeValue={handleChangeValue}
onCommitDate={console.log}
label="Контролируемый DatePicker"
format="DD.MM.YYYY"
lang="ru"
contentRight={<IconDone size="s" />}
placement="bottom"
usePortal
maskWithFormat
/>
</div>
);
}
```
## Контролируемый вариант компонента Для передачи текущего значения необходимо использовать свойство  `value` .
Чтобы отслеживать изменения, полученные в поле ввода необходимо использовать  `onChangeValue` .
Свойство  `onCommitDate`  вызывается, когда выбор даты сделан с помощью выпадающего календарая
или же в поле ввода введена корректная дата. ```tsx
import React, {useState} from 'react';
import { DatePicker } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
export function App() {
const [dateValue, setDate] = useState<Date | string | undefined>(new Date());
const [originalDateValue, setOriginalDate] = useState<Date | string | null | undefined>(new Date());
const [isoDateValue, setIsoDate] = useState<string | undefined>(new Date().toISOString());
const handleChangeValue = (
_: React.SyntheticEvent<HTMLInputElement> | null,
value?: string,
originalDate?: Date | string | null,
isoDate?: string,
) => {
setDate(value);
setOriginalDate(originalDate);
setIsoDate(isoDate);
};
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '3rem'}}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem'}}>
<p>Значение date: {String(dateValue)}</p>
<p>Значение originalDate: {String(originalDateValue)}</p>
<p>Значение isoDate: {isoDateValue}</p>
</div>
<DatePicker
value={dateValue}
onChangeValue={handleChangeValue}
onCommitDate={console.log}
label="Контролируемый DatePicker"
format="DD.MM.YYYY"
lang="ru"
contentRight={<IconDone size="s" />}
placement="bottom"
usePortal
maskWithFormat
/>
</div>
);
}
```
Для передачи текущего значения необходимо использовать свойство  `value`  - принимает массив из двух значений.
Чтобы отслеживать изменения, полученные в полях ввода необходимо использовать  `onChangeFirstValue`  и  `onChangeSecondValue`  соответственно.
Свойства  `onCommitFirstDate`  вызывается для первого значения, а  `onCommitSecondDate`  для второго, когда выбор даты сделан с помощью выпадающего календарая
или же в соответствующем поле ввода введена корректная дата.
```tsx
import React, {useState} from 'react';
import { DatePickerRange } from '@salutejs/plasma-web';
import { IconDone } from '@salutejs/plasma-icons';
type DateType = Date | string | undefined | null
export function App() {
const [dateValue, setDate] = useState<[DateType, DateType]>([new Date(), null]);
const [originalDateValue, setOriginalDate] = useState<[DateType, DateType]>([new Date(), null]);
const [isoDateValue, setIsoDate] = useState<[string?, string?]>([new Date().toISOString(), '']);
const valueSetter = <T extends unknown, P extends React.Dispatch<React.SetStateAction<any>>>(
value: T,
sideOfDate: 'start' | 'end',
setter: P,
) => {
setter((prevValue) => {
if (sideOfDate === 'start') {
return [value, prevValue[1]];
}
return [prevValue[0], value];
});
};
const handleChangeValue = (sideOfDate: 'start' | 'end') => (
_: React.SyntheticEvent<HTMLInputElement> | null,
value?: string,
originalDate?: Date | string | null,
isoDate?: string,
) => {
valueSetter(value, sideOfDate, setDate);
valueSetter(originalDate, sideOfDate, setOriginalDate);
valueSetter(isoDate, sideOfDate, setIsoDate);
};
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
<p>Значение date:<br/> {dateValue.map(String).join(' --- ')}</p>
<p>Значение originalDate:<br/> {originalDateValue.map(String).join(' --- ')}</p>
<p>Значение isoDate:<br/> {isoDateValue.join(' --- ')}</p>
</div>
<DatePickerRange
value={dateValue}
onChangeFirstValue={handleChangeValue('start')}
onChangeSecondValue={handleChangeValue('end')}
onCommitFirstDate={console.log}
onCommitSecondDate={console.log}
label="Контролируемый RangeDatePicker"
format="DD.MM.YYYY"
lang="ru"
placement="bottom"
isDoubleCalendar
usePortal
maskWithFormat
/>
</div>
);
}
```