Balance Logo
Balance
Reckon Design System
Open playroom

Date Picker

Allow users to select a single date or a range of dates.
Install
pnpm add @balance-web/date-picker
Import usage
import {
Calendar,
DatePicker,
CalendarPicker,
DateRangePicker,
CalendarRangePicker
} from '@balance-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

Alternatives

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

DatePicker

Allows the user to view, type and pick dates from a calendar.

Edit in Playroom

size

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

disabled

Disables the input.

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.

DateRangePicker

The range picker functions much like the DatePicker except it lets the user select or type a date range.

Size

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

disabled

Disables the input.

Keyboard shortcuts

t

Selects todays date.

CalendarPicker

A simple version of the DatePicker meant to be used for UIs that require filtering instead of forms. It does not have text input.

CalendarPicker

A simple version of the DateRangePicker meant to be used for UIs that require filtering instead of forms. It does not have text input.

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