Date Field

Related components

DateField renders a field composed of an DateInput, a Label and a InlineMessage. It is the preferred way to render a form field for dates.

In addition to text Label (required) and a validation error (optional), DateField accepts all the same props as DateInput and will pass them on to the DateInput it renders. However, as with all our composed components, DateField’s className prop will be applied to a containing div—the styling of the individual components inside DateField cannot be altered.

Err on the side of using consistent form fields, but if you really need something with different styling then consider composing your own field from the DateInput, Label and InlineMessage components.

<Form>
  <DateField name="exam-date" label="Exam date" initialDate={new Date()} />
</Form>

API Reference

DateField

Prop	Type	Default	Required
`appearance`	`"standard"` \| `"modern"`	-	-
`className`	`string`	-	-
`date`	`Date`	-	-
`dateFormat`	`string`	-	-
`description`	`string`	-	-
`disabled`	`boolean`	-	-
`error`	`string`	-	-
`firstDayOfWeek`	`0` \| `1` \| `4` \| `3` \| `2` \| `5` \| `6`	-	-
`hideLabel`	`boolean`	-	-
`initialDate`	`Date`	-	-
`label`	`string`	-
`labels`	`{ open: string; next: string; previous: string; nextYear: string; previousYear: string; }`	-	-
`maxDate`	`Date`	-	-
`minDate`	`Date`	-	-
`monthNames`	`string[]`	-	-
`monthsToDisplay`	`number`	-	-
`name`	`string`	-
`offset`	`number`	-	-
`onChange`	`(value?: Date \| undefined) => void`	-	-
`onOffsetChanged`	`(offset: number) => void`	-	-
`prompt`	`{ link?: string \| undefined; label: string; onClick?: (() => void) \| undefined; }`	-	-
`render`	`RenderFn`	-	-
`required`	`boolean`	-	-
`revalidate`	`() => Promise<boolean>`	-	-
`selected`	`Date` \| `Date[]`	-	-
`showOutsideDays`	`boolean`	-	-
`size`	`"sm"` \| `"md"` \| `"lg"`	-	-
`theme`	`"white"` \| `"grey"`	-	-
`validation`	`ValidationOptions`	-	-
`weekdayNames`	`string[]`	-	-