Balance Logo
Reckon Design System

Date Field

Date inputs and pickers allow users to select a single date or a range of dates.
pnpm add @reckon-web/date-field
Import usage
import {
} from '@reckon-web/date-field';
  • Code
  • API

Date components are used to display past, present, or future dates. The kind of date (exact, approximate, memorable) you are requesting from the user will determine which component is best to use.

NOTE: all date components expect their value to be an ISO 8601 date string (without the time signature), which follows the format yyyy-mm-dd

Date Field

Use if the date can be remembered by the user easily, such as a date of birth, and they don’t need a calendar to anticipate the dates.

Open in Playroom

Date Picker

Use a calendar picker when the user needs to know a date’s relationship to other days or when a date could be variable. It allows the user to view and pick dates from a calendar widget.


The date picker implements react-day-picker under the hood. A subset of the DayPicker API is available to influence the calendar appearance and behaviour. Available props:

  • disabledDays
  • modifiers
  • initialMonth
  • fromMonth
  • toMonth

Notice that we're disallowing selection of days prior to today using the disabledDays property. We're also disabling navigation to months prior to today using fromMonth because they would not be selectable.

Range Picker

The date range picker functions much like the single date picker but instead of choosing just one date the user can choose a start and end date.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.