Date Picker
import {DatePicker} from '@gravity-ui/date-components';
DatePicker is a sophisticated, lightweight, and fully customizable component designed to provide intuitive date picking functionality in your React applications. Built with user experience and ease of integration in mind, it fits seamlessly within forms, modals, or any UI element requiring date input. It can be controlled if you set value property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property defaultValue. Component is uncontrolled by default.
§Useful addition
To set dates in the right format you may need to include additional helpers from Date Utils library
import {dateTimeParse, dateTime} from '@gravity-ui/date-utils';
§Appearance
The appearance of DatePicker is controlled by the size, view and pin properties.
§Size
To control the size of the DatePicker use the size property. Default size is m.
<DatePicker size="s" />
<DatePicker size="m" />
<DatePicker size="l" />
<DatePicker size="xl" />§View
normal - the main view of DatePicker (used by default).
<DatePicker />clear - view of DatePicker without visible borders (can be used with a custom wrapper)
<DatePicker view="clear" />§Pin
The pin property allows you to control the shape of the right and left edges and is usually used for combining multiple controls in a single unit.
The value of the pin property consists of left and edge style names divided by a dash, e.g. "round-brick".
The edge styles are: round (default), circle, brick and clear.
<DatePicker pin="round-brick" />
<DatePicker pin="brick-brick" />
<DatePicker pin="brick-round" />§Value
§Min and max value
The minValue property allows you to specify the earliest date and time that can be entered by the user. Conversely, the maxValue property specifies the latest date and time that can be entered. If you input the value out of this bounds component changes it's view like in case of invalid validation state.
<DatePicker minValue={dateTimeParse('01.01.2024')} placeholder={"minValue: '01.01.2024'"}/>
<DatePicker maxValue={dateTimeParse('01.01.2025')} placeholder={"maxValue: '01.01.2025'"}/>§States
§Disabled
The state of the DatePicker where you don't want the user to be able to interact with the component.
<DatePicker disabled={true} defaultValue={dateTime()} />§Readonly
readOnly is a boolean attribute that, when set to true, makes the DatePicker component immutable to the user. This means that while the input will display its current value, users will not be able to change it.
<DatePicker readOnly defaultValue={dateTimeParse(new Date())} />§Error
The state of the DatePicker in which you want to indicate incorrect user input. To change DatePicker appearance, use the validationState property with the "invalid" value. An optional message text can be added via the errorMessage property. Message text will be rendered under the component.
<DatePicker errorMessage="Error message" validationState="invalid" />
<DatePicker validationState="invalid" />§Additional content
§Placeholder
This prop allows you to provide a short hint that describes the expected value of the input field. This hint is displayed within the input field before the user enters a value, and it disappears upon the entry of text.
<DatePicker placeholder="Placeholder" />§Label
Allows you to place the label in the left part of the field. Label can take up no more than half the width of the entire space of DatePicker.
<DatePicker label="Label" />
<DatePicker label="Very long label with huge amount of symbols" />§Clear button
hasClear is a boolean prop that, provides users with the ability to quickly clear the content of the input field.
<DatePicker hasClear />§Format
The format prop is a string that defines the date and time format the DatePicker component will accept and display. This prop determines how the date and time are visually presented to the user and how the user's input is expected to be formatted. Available formats
<DatePicker format='LL' />§Time zone
timeZone is the property to set the time zone of the value in the input. Learn more about time zones
§Customisation
If you want to use custom calendar component inside DatePicker you can pass it as children with calendar like props.
§Properties
| Name | Description | Type | Default |
|---|---|---|---|
| aria-describedby | The control's aria-describedby. Identifies the element (or elements) that describes the object. attribute | string | |
| aria-details | The control's aria-details. Identifies the element (or elements) that provide a detailed, extended description for the object. attribute | string | |
| aria-label | The control's aria-label. Defines a string value that labels the current element. attribute | string | |
| aria-labelledby | The control's aria-labelledby. Identifies the element (or elements) that labels the current element. attribute | string | |
| autoFocus | The control's autofocus. Whether the element should receive focus on render. attribute | boolean | |
| className | The control's wrapper class name | string | |
| defaultValue | Sets the initial value for uncontrolled component. | DateTime | |
| disabled | Indicates that the user cannot interact with the control | boolean | false |
| errorMessage | Error text | ReactNode | |
| format | Format of the date when rendered in the input. Available formats | string | |
| hasClear | Shows the icon for clearing control's value | boolean | false |
| id | The control's id attribute | string | |
| isDateUnavailable | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | ((date: DateTime) => boolean) | |
| label | Help text rendered to the left of the input node | string | |
| maxValue | The maximum allowed date that a user may select. | DateTime | |
| minValue | The minimum allowed date that a user may select. | DateTime | |
| onBlur | Fires when the control lost focus. Provides focus event as a callback's argument | ((e: FocusEvent<Element, Element>) => void) | |
| onFocus | Fires when the control gets focus. Provides focus event as a callback's argument | ((e: FocusEvent<Element, Element>) => void) | |
| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | ((e: KeyboardEvent<Element>) => void) | |
| onKeyUp | Fires when a key is released. Provides keyboard event as a callback's argument | ((e: KeyboardEvent<Element>) => void) | |
| onUpdate | Fires when the value is changed by the user. Provides new value as an callback's argument | ((value: DateTime | null) => void | |
| pin | Corner rounding | TextInputPin | 'round-round' |
| placeholder | Text that appears in the control when it has no value set | string | |
| placeholderValue | A placeholder date that controls the default values of each segment when the user first interacts with them. | DateTime | today's date at midnigh |
| readOnly | Whether the component's value is immutable. | boolean | false |
| size | The size of the control | "s" "m" "l" "xl" | "m" |
| style | Sets inline style for the element. | CSSProperties | |
| timeZone | Sets the time zone. Learn more about time zones | string | |
| validationState | Validation state | "invalid" | |
| value | The value of the control | DateTime null | |
| view | The view of the control | "normal" "clear" | "normal" |