DateInput

a control to input a single date or a date range

Storybook

CodeSandbox

Github

Using Grommet for HPE?See DateInput examples and guidance.

Props

buttonProps

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

object

{}

calendarProps

Any properties to pass on to the underlying Calendar.

object

{}

defaultValue

The default date or date range value in ISO8601 format.

string

"2020-07-21T15"

array

[2020-07-31T15, 2020-07-31T15]

dropProps

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

object

{ align: { top: "bottom", left: "left" } }

format

The date format to use. This property should be used when in a Form.

string

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'.

"mm/dd/yyyy"

icon

The icon to show to open the DateInput.

element

<Calendar />

id

The id of the input.

string

"date-input-id"

inline

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

boolean

true

false

inputProps

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

object

{}

messages

Custom messages for DateInput. Used for accessibility by screen readers.

object


{
  "enterCalendar": "Calendar is open, press tab to enter the calendar",
  "exitCalendar": "Exited calendar dialog"
}

name

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

string

"name"

onChange

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

function

() => {}

readOnlyCopy

Makes the DateInput readOnly and adds a copy to clipboard button. Setting this to true will automatically set the readOnly prop to true.

boolean

true

false

reverse

Whether the icon should be reversed so that the icon is at the beginning of the input.

boolean

true

false

size

The size of the text.

string

"xsmall"

"small"

"medium"

"large"

"xlarge"

"xxlarge"

"2xl"

"3xl"

"4xl"

"5xl"

"6xl"

"string"

value

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

string

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

array

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

React/DOM Properties

At its core, the DateInput component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

global.input.readOnly.background

Background style for readOnly inputs.

string

A color or image url.

"neutral-1"

"url(//my.com/assets/img.png)"

object


{
  color: "neutral-1",
  dark: true,
  image: "url(//my.com/assets/img.png)"
  position: "bottom",
  opacity: true,
  repeat: "no-repeat",
  size: "cover",
  light: "string"
}

where opacity could be:

"weak"

"medium"

"strong"

boolean

number

where position could be:

any CSS for background-position

where repeat could be:

"no-repeat"

"repeat"

"string"

where size could be:

"cover"

"contain"

"string"

global.input.readOnly.border.color

Border color for readOnly inputs.

string

"grey"

dateInput.container.round

How much to round the corners.

string

"xxsmall"

dateInput.icon.size

The size of the Calendar icon

string

"24px"