Balance Logo
Balance
Reckon Design System

Date Field

Date inputs and pickers allow users to select a single date or a range of dates.
Install
pnpm add @reckon-web/date-field
Import usage
import {
DateField,
DatePickerField,
DateRangePickerField
} 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

The DateField component has been deprecated and will be removed in a future version. Use Field and DateInput instead.

- <DateField
- label="Field label"
- onChange={handleInputChange}
- value={inputValue}
- />
+ <Field label="Field label">
+ <DateInput
+ onChange={handleInputChange}
+ value={inputValue}
+ />
+ </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

The DatePickerField component has been deprecated and will be removed in a future version. Use Field and DatePicker instead.

- <DatePickerField
- label="Field label"
- onChange={handleInputChange}
- value={inputValue}
- />
+ <Field label="Field label">
+ <DatePicker
+ onChange={handleInputChange}
+ value={inputValue}
+ />
+ </Field>

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.

Size

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

Weight

Default weight is "subtle". 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

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 DateRangePickerField component has been deprecated and will be removed in a future version. Use Field and DateRangePicker instead.

- <DateRangePickerField
- label="Field label"
- onChange={handleInputChange}
- value={inputValue}
- />
+ <Field label="Field label">
+ <DateRangePicker
+ onChange={handleInputChange}
+ value={inputValue}
+ />
+ </Field>

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.

Size

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

Weight

Default weight is "subtle". 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.

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