Date Capture

Three approaches to date input: separate fields, date picker, and date range.

Live Demo

Example 1: Date of Birth (Separate Fields)

Best for dates far in the past, such as date of birth, where scrolling through a date picker is cumbersome.

Date of Birth

Example 2: Effective Date (Date Picker)

Best for selecting near-future dates, such as when a policy change should take effect.

Example 3: Date Range (Two Pickers)

Best for specifying a period of time, such as coverage dates or employment duration.

Coverage Period

About This Library

Reference implementations of interaction patterns for NYS digital services.

View on GitHub

Resources