DateInput

Ideal for editing dates, <DateInput> renders an HTML <input type="date"> element, that most browsers display as a date picker.

The appearance of <DateInput> depends on the browser, and falls back to a text input on browsers that do not support <input type="date">. The date formatting in this input depends on the user’s locale.

Usage

import { DateInput } from '@/components/admin/date-input';

<DateInput source="published_at" />;

The field value must be a string using the pattern YYYY-MM-DD (ISO 8601), e.g. '2022-04-30'. The returned input value will also be in this format, regardless of the browser locale.

<DateInput> also accepts values that can be converted to a Date object, such as:

• a localized date string (e.g. '30/04/2022'),
• an ISO date string (e.g. '2022-04-30T00:00:00.000Z'),
• a Date object, or
• a Linux timestamp (e.g. 1648694400000).

In these cases, <DateInput> will automatically convert the value to the YYYY-MM-DD format, and will return a string, or null if the date is invalid.

Note: This conversion may change the date because of timezones. For example, the date string '2022-04-30T00:00:00.000Z' in Europe may be displayed as '2022-04-29' in Honolulu. If this is not what you want, use the format prop to convert the date to UTC and return the formatted string as yyyy-MM-dd to the input. In this scenario you likely want the outgoing value to stay consistent with UTC too, so provide your own parse function to <DateInput> to transform it as needed.

Props

Prop	Required	Type	Default	Description
source	Required	string	-	Field name
className	Optional	string	-	CSS classes
defaultValue	Optional	string or Date	-	Default value
disabled	Optional	boolean	-	Disable input
format	Optional	function	-	Callback taking the value from the form state, and returning the input value.
helperText	Optional	ReactNode	-	Help text
label	Optional	string | false	Inferred	Custom / hide label
parse	Optional	(value:string) => string or Date	-	Callback taking the value from the input, and returning the value to be stored in the form state.
placeholder	Optional	string	-	Placeholder text
validate	Optional	Validator | Validator[]	-	Validation

defaultValue

The defaultValue prop can be used to set the initial value of the input. It can be a string in the YYYY-MM-DD format, a Date object, or a timestamp.

<DateInput source="publishedAt" defaultValue={new Date('2022-04-30')} />

format

The format prop accepts a callback taking the value from the form state, and returning the input value (which should be a string).

form state value --> format --> form input value (string)

<DateInput
    source="publishedAt"
    format={(value) => new Date(value).toISOString().split('T')[0]}
    parse={(value) => new Date(value)}
/>

format often comes in pair with parse to transform the input value before storing it in the form state.

Tip

By default, Shadcn Admin Kit inputs have the following format function, which turns any null or undefined value into an empty string. This is to avoid warnings about controlled/uncontrolled input components:

parse

The parse prop accepts a callback taking the value from the input (which is a string), and returning the value to put in the form state.

form input value (string) ---> parse ---> form state value

<DateInput
    source="publishedAt"
    format={(value) => new Date(value).toISOString().split('T')[0]}
    parse={(value) => new Date(value)}
/>

parse often comes in pair with format to transform the form value before passing it to the input.

validate

To validate that a date is before or after a given date, use the maxValue and minValue validators with a date string.

import { minValue } from 'ra-core';
import { DateInput } from '@/components/admin/date-input';

// requires dates after October 10th, 2022
<DateInput source="published" validate={minValue('2022-10-26')} />;

Internationalization

It is not possible to customize the date format. Browsers use the user locale to display the date in the correct format.