DatePicker

This component is published as a separate package and uses react-datepicker under the hood. See props docs on github for full documentation.

Install package

1. Run the following command to install:

npm install @intility/bifrost-react-datepicker

2. Include datepicker.css globally, method may vary depending on your build system.

import "@intility/bifrost-react-datepicker/datepicker.css";

3. Import component separately from other components

import DatePicker from "@intility/bifrost-react-datepicker";

4. Use it in your JSX code

<DatePicker label="Select a date" />

Data binding

Bind data by using selected and onChange props.

Time selection

Using showTimeSelect prop will include time selection to the <DatePicker>. It shows a scrollable select and can be used with timeIntervals to set time intervals, default is 30. Add showTimeSelectOnly to hide date selection and calendar.

Month / Year selection

Using showMonthYearPicker or showYearPicker prop will make the <DatePicker> pick month+year or year only.

Date range

It's possible to select both start and end date in the same picker using endDate, startDate and selectsRange which makes the onChange callback receive an array with two values.

The swapRange prop allows the user to click either start or end date first.

Description

description prop can be used as hints or additional information.

Icon

rightIcon prop places the icon to the right.

Any font awesome icon can passed to the icon prop.

Small

Use small prop to decrease the input height from 40px to 32px.

Validation

DatePicker can have different states. Use feedback to provide additional information (provide a blank string to reserve space for it).

Use 'warning' when date value is missing or invalid. If user ignores the warning and tries to submit form, use 'alert'. Use 'success'for validated fields. Default state is 'default'.

Locale

Wrap your app in <Bifrost> to configure locale for all bifrost components, including the DatePicker:

Read only

Set the datepicker to read-only with readOnly prop.

Disabled

Disable the datepicker with disabled prop.

Clearable

Add a clear button to the input field with isClearable prop. (When a value is present)