DateField renders a field composed of an DateInput, a Label and a InlineMessage

DateField 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 css prop will be applied to a containing Box—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

PropTypeDefaultRequired
date
Date

-

-

maxDate
Date

-

-

minDate
Date

-

-

monthsToDisplay
number

-

-

firstDayOfWeek
0 | 1 | 2 | 3 | 4 | 5 | 6

-

-

showOutsideDays
boolean

-

-

selected
Date | Date[]

-

-

render
RenderFn

-

-

offset
number

-

-

onOffsetChanged
(offset: number) => void

-

-

monthNames
string[]

-

-

weekdayNames
string[]

-

-

labels
{ open: string; next: string; previous: string; nextYear: string; previousYear: string; }

-

-

initialDate
Date

-

-

dateFormat
string

-

-

disabled
boolean

-

-

size
"sm" | "md"

-

-

revalidate
() => Promise<boolean>

-

-

onChange
(value?: Date | undefined) => void

-

-

cssCSSProperties

-

-

error
string

-

-

labelstring

-

prompt
{ link: string; label: string; }

-

-

description
string

-

-

required
boolean

-

-

hideLabel
boolean

-

-

namestring

-

validation
ValidationOptions

-

-