<DateInput>

Displays input for entering a date.

Note that this is not a calendar-style UI.

Use of <DateInput>

<DateInput
  name="email"
  isRequired
  labelHtml={{ en: 'Email:' }}
  hintHtml={{ en: 'E.g. user@example.com' }}
  validationErrorRequiredHtml={{ en: 'Required' }}
  validationErrorInvalidHtml={{ en: '' }}
  showDate={true}
  showTime={true}
  showSecond={true}
  yearLabelHtml={{ en: 'Year' }}
  monthLabelHtml={{ en: 'Month' }}
  dayLabelHtml={{ en: 'Day' }}
  hourLabelHtml={{ en: 'Hour' }}
  minuteLabelHtml={{ en: 'Minute' }}
  secondLabelHtml={{ en: 'Seconds' }}
  yearPlaceholder={{ en: 'YY' }}
  monthPlaceholder={{ en: 'MM' }}
  dayPlaceholder={{ en: 'DD' }}
  hourPlaceholder={{ en: 'HH' }}
  minutePlaceholder={{ en: 'MM' }}
  secondPlaceholder={{ en: 'SS' }}
  minDateUTC="2021-01-01T01:01:01Z"
  maxDateUTC={false}
/>

<DateInput>'s props

PropAboutType
dayLabelHtml

Localisable HTML: day label content.

LocalisedHtml
dayPlaceholder

Localisable PlainText: day input placeholder.

Placeholder content may cause accessibility problems as users can confuse it with their own form values. With autoComplete prefilling fields the placeholder value can be confusing. Typically this should be left empty.

LocalisedPlainText
hintHtml

Localisable HTML: hint content.

LocalisedHtml
hourLabelHtml

Localisable HTML: hours label content.

LocalisedHtml
hourPlaceholder

Localisable PlainText: hour input placeholder.

Placeholder content may cause accessibility problems as users can confuse it with their own form values. With autoComplete prefilling fields the placeholder value can be confusing. Typically this should be left empty.

LocalisedPlainText
isRequired

Whether users are required to fill in this form field.

This setting affects aria-required and whether a * is displayed next to the form field, etc.

boolean
labelHtml

Localisable HTML: label content.

Used as <fieldset> <legend> because <DateInput> is rendered with multiple <input>s.

However is named 'labelHtml' for consistency with other form field components.

LocalisedHtml
maxDateUTC

Maximum valid date in UTC.

Value is a string formated as:

`${number}-${number}-${number}T${number}:${number}:${number}Z`

E.g.

2022-01-01T12:00:00Z
false | `${number}-${number}-${number}T${number}:${number}:${number}Z`
minDateUTC

Minimum valid date in UTC.

Value is a string formated as:

`${number}-${number}-${number}T${number}:${number}:${number}Z`

E.g.

2022-01-01T12:00:00Z
false | `${number}-${number}-${number}T${number}:${number}:${number}Z`
minuteLabelHtml

Localisable HTML: minutes label content.

LocalisedHtml
minutePlaceholder

Localisable PlainText: minute input placeholder.

Placeholder content may cause accessibility problems as users can confuse it with their own form values. With autoComplete prefilling fields the placeholder value can be confusing. Typically this should be left empty.

LocalisedPlainText
monthLabelHtml

Localisable HTML: month label content

LocalisedHtml
monthPlaceholder

Localisable PlainText: month input placeholder.

Placeholder content may cause accessibility problems as users can confuse it with their own form values. With autoComplete prefilling fields the placeholder value can be confusing. Typically this should be left empty.

LocalisedPlainText
name

The name attribute in HTML (MDN name attribute)

Name of the form control.

Submitted with the form as part of a name:value pair in the <Formally onSubmit> callback prop valuesAsFormNames.

string
secondLabelHtml

Localisable HTML: seconds label content.

LocalisedHtml
secondPlaceholder

Localisable PlainText: seconds input placeholder.

Placeholder content may cause accessibility problems as users can confuse it with their own form values. With autoComplete prefilling fields the placeholder value can be confusing. Typically this should be left empty.

LocalisedPlainText
showDate

Whether to display the year/month/day input fields.

boolean
showSecond

Whether to display the seconds input field.

boolean
showTime

Whether to display the hour/minute input fields.

boolean
validationErrorInvalidHtml

Localisable HTML: invalid validation content

LocalisedHtml
validationErrorRequiredHtml

Localisable HTML: required validation content

LocalisedHtml
yearLabelHtml

Localisable HTML: year label content.

LocalisedHtml
yearPlaceholder

Localisable PlainText: year placeholder content.

Placeholder content may cause accessibility problems as users can confuse it with their own form values. With autoComplete prefilling fields the placeholder value can be confusing. Typically this should be left empty.

LocalisedPlainText
id

Component Id.

Must be unique within the form.

string
hasChildrenById

Non-editable.

Used to indicate that this component doesn't have children.

false
hasTagsById

Non-editable.

Used to indicate that this component isn't a form field with tags by id.

false
isFormField

Non-editable.

Used to indicate that this component is a form field.

true
isMultichoice

Non-editable.

Used to indicate that this component isn't a multichoice form field like <Select>, <Radios> or <Checkboxes>.

false
type

Non-editable.

Type of component of "DateInput".

"DateInput"