Date input

The date input component allows users to type in a single date or date range. Date inputs are sometimes combined with calendars.

Overview

Single date

The single date variant allows only one date. It can be paired with an icon button that opens a calendar.

Default

The default single date input includes a header 'date', description 'MM/DD/YYYY', a white input field with a gray outline containing the placeholder text 'MM/DD/YYYY'. To the right of the date input field is a blue circular button containing a white calendar icon.

Typing

In the typing state, the date input field is surrounded by a dashed outline. The background of the input field becomes light blue.

Filled

In the filled state, the text within the input field is black instead of gray.

Calendar opened

In the calendar opened state, the calendar button becomes navy blue and is surrounded by a dashed outline.

Error

In the error state, the entire component is placed on a light red surface. The error is below the description and above the input field. It is represented by a red exclamation point in a red circle, accompanied by the text "Why is there an error and how to fix it."

Date range

The date range variant allows users to enter a start and end date.

Default

The default date range component consists of a header "Date range (MM/DD/YYYY) above two input fields separated by a gray horizontal dash. The left field is labeled "Start date" and contains the placeholder text "MM/DD/YYYY" and the right field is labeled "End date" and contains the text "MM/DD/YYYY". To the right of these fields is a blue circular button containing a calendar icon.

Calendar opened

In the calendar opened state, the calendar button becomes navy blue and is surrounded by a dashed outline.

Error

In the error state, the entire component is placed on a light red surface. The error is below the header and above the input fields. It is represented by a red exclamation point in a red circle, accompanied by the text "Why is there an error and how to fix it."

Usage context

When to use

Use the date input component whenever you’re asking a user to input a date or date range.

For dates that are are no more than one year in the past or one year in the future, provide the calendar.

For dates that are likely to be more than one year in the past or future, such as date of birth for an adult, use only the date input component without a calendar.

When to use something else

When date options are limited or restricted to a certain timeframe, use a drop-down instead. For example, when selecting available times for an appointment.

Usage guidelines

See usage guidelines under calendar.

Custom element

Use the nyc-date-input custom element to instantiate a date input

Single date

This code is for reference only. The library is currently in beta. Check back for future releases.

<nyc-date-input></nyc-date-input>

Date range

This code is for reference only. The library is currently in beta. Check back for future releases.

<nyc-date-input date-range></nyc-date-input>