Balance Logo
Reckon Design System

Date Picker

Allow users to select a single date or a range of dates.
pnpm add @reckon-web/date-picker
Import usage
import {
} from '@reckon-web/date-picker';
  • Code
  • API

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


The kind of date (exact, approximate, memorable) you are requesting from the user will determine which component is best to use.

  • DateInput — When the date is memorable or distant, such as a date of birth

Single date

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

Open in Playroom


There are three options for the size, "medium" is the default.


For use in data-dense interfaces you can apply a weight of "none" to hide the chrome of the input until the user interacts with it, on hover or focus.

Calendar props

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

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

Date range

The range picker functions much like the single picker. It displays two calendar months and expects a start and end date.


The DateRangePicker accepts the same "size" property as the DatePicker.


The DateRangePicker accepts the same "weight" property as the DatePicker.

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo