DateInput

a control to input a single date or a date range

Storybook

CodeSandbox

Props

buttonProps

Any properties to pass on to the underlying DropButton when not inline and no format.

{

}

calendarProps

Any properties to pass on to the underlying Calendar.

{

}

defaultValue

The default date or date range value in ISO8601 format.

"string"

[

"string"

]

dropProps

Any properties to pass on to the underlying Drop when not inline.

{

}

format

The date format to use. If not specified, the date value will not be displayed as a text string and the user will not be able to enter a date by typing. For example: 'mm/dd/yyyy', or for a range: 'mm/dd/yyyy-mm/dd/yyyy'. This property should be used when in a Form.

"string"

id

The id of the input.

"string"

inline

Whether the calendar should always be shown or via a Drop when interacting with the input.

truefalse

inputProps

Any properties to pass on to the underlying MaskedInput when there is a format.

{

}

name

The name of the input. This property is required when used within FormField.

"string"

onChange

Function that will be called when the user types or selects a date. The updated value will be available via 'event.value'.

({ value }) => {}

value

The date or date range value(s) in ISO8601 format.

"2018-10-16T12:22:00Z"

["2018-10-12", "2018-10-17"]

Theme

dateInput.icon.size

The size of the Calendar icon

string