grommet
components

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'. For a date without leading zeros: 'm/d/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