Date Field

import {DateField} from '@gravity-ui/date-components';

DateField component is a versatile and convenient input field specifically designed for date entry in React applications. With an intuitive interface and easy integration, it's perfect for any form that requires date or time input, such as event schedulers, booking systems, or data-driven reports. 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} from '@gravity-ui/date-utils';

§Appearance

The appearance of DateField is controlled by the size, view and pin properties.

§Size

To control the size of the DateField use the size property. Default size is m.

<DateField size="s" />
<DateField size="m" />
<DateField size="l" />
<DateField size="xl" />

§View

normal - the main view of DateField (used by default).

<DateField />

clear - view of DateField without visible borders (can be used with a custom wrapper)

<DateField 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.

<DateField pin="round-brick" />
<DateField pin="brick-brick" />
<DateField 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.

<DateField minValue={dateTimeParse('01.01.2024')} placeholder={"minValue: '01.01.2024'"}/>
<DateField maxValue={dateTimeParse('01.01.2025')} placeholder={"maxValue: '01.01.2025'"}/>

§States

§Disabled

The state of the DateField where you don't want the user to be able to interact with the component.

<DateField disabled={true} defaultValue={dateTimeParse(new Date())} />

§Readonly

readOnly is a boolean attribute that, when set to true, makes the DateField component immutable to the user. This means that while the input will display its current value, users will not be able to change it.

<DateField readOnly defaultValue={dateTimeParse(new Date())} />

§Error

The state of the DateField in which you want to indicate incorrect user input. To change DateField 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.

<DateField errorMessage="Error message" validationState="invalid" />
<DateField 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.

<DateField 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 DateField.

<DateField label="Label" />
<DateField 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.

<DateField hasClear />

§Start content

Allows you to add content to the start part of the field. It is placed before all other components.

<DateField label="Label" startContent={<Label size="s">Start content</Label>} />

§End content

Allows you to add content to the end part of the field. It is placed after all other components.

<DateField endContent={<Label size="s">End content</Label>} hasClear/>

§Format

The format prop is a string that defines the date and time format the DateField 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

<DateField format='LTS' />

§Custom Date Parser

You can provide a custom parser function to handle pasted date strings through the parseDateFromString prop. This is useful when you need to support specific date formats or custom parsing logic that differs from the default behavior.

§Time zone

timeZone is the property to set the time zone of the value in the input. Learn more about time zones

§Properties