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
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";
import "@intility/bifrost-react-datepicker/datepicker.css";

3. Import component separately from other components

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

4. Use it in your JSX code

<DatePicker label="Select a date" />
<DatePicker label="Select a date" />

Data binding

Bind data by using selected and onChange props.

import { useState } from "react";
import FormatDate from "@intility/bifrost-react/FormatDate";
import DatePicker from "@intility/bifrost-react-datepicker";
import "@intility/bifrost-react-datepicker/datepicker.css";

export default function DatePickerDataBindingDemo() {
  const [date, setDate] = useState(new Date());

  return (
    <>
      <DatePicker
        label="Select a date"
        selected={date}
        onChange={(newDate) => setDate(newDate)}
      />
      <p>
        Selected date: <FormatDate date={date} />
      </p>
    </>
  );
}

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.

<DatePicker label="Date and time" showTimeSelect />
<DatePicker label="Custom intervals" showTimeSelect timeIntervals={5} />
<DatePicker label="Time only" showTimeSelect showTimeSelectOnly />
<DatePicker label="Date and time" showTimeSelect />
<DatePicker label="Custom intervals" showTimeSelect timeIntervals={5} />
<DatePicker label="Time only" showTimeSelect showTimeSelectOnly />

Month / Year selection

Using showMonthYearPicker or showYearPicker prop will make the <DatePicker> display only month or year options based on which prop is being used.

<DatePicker label="Month" showMonthYearPicker />
<DatePicker label="Year" showYearPicker />
<DatePicker label="Month" showMonthYearPicker />
<DatePicker label="Year" showYearPicker />

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.

import { useState } from "react";
import DatePicker from "@intility/bifrost-react-datepicker";
import "@intility/bifrost-react-datepicker/datepicker.css";

export default function DatePickerRangeDemo() {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();

  return (
    <div className="bf-autocol">
      <DatePicker
        label="Select multiple days in a row"
        selected={startDate}
        startDate={startDate}
        endDate={endDate}
        onChange={([start, end]) => {
          setStartDate(start);
          setEndDate(end);
        }}
        selectsRange
      />
    </div>
  );
}

Description

description prop can be used as hints or additional information.

<DatePicker
  label="Start Date"
  description="Must be after 01.01.2010"
  minDate={new Date("2010-01-01")}
/>
<DatePicker
  label="Start Date"
  description="Must be after 01.01.2010"
  minDate={new Date("2010-01-01")}
/>

Icon

rightIcon prop places the icon to the right.

Any custom icon can passed to the icon prop.

import { faBirthdayCake } from "@fortawesome/free-solid-svg-icons";
import DatePicker from "@intility/bifrost-react-datepicker";

function MyComponent() {
  return (
    <>
      <DatePicker label="Icon right" rightIcon />
      <DatePicker label="Birthday cake icon" icon={faBirthdayCake} />
    </>
  );
}
import { faBirthdayCake } from "@fortawesome/free-solid-svg-icons";
import DatePicker from "@intility/bifrost-react-datepicker";

function MyComponent() {
  return (
    <>
      <DatePicker label="Icon right" rightIcon />
      <DatePicker label="Birthday cake icon" icon={faBirthdayCake} />
    </>
  );
}

Small

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

<DatePicker label="label" small />
<DatePicker label="label" small />

Validation

DatePicker can have different states. Use feedback to provide additional information.

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

Use required prop to make an inputfield required.

<DatePicker label="Success"  state="success" required />
<DatePicker
  label="Warning"
  state="warning"
  feedback="Missing date"
  required
/>
<DatePicker
  label="Alert"
  state="alert"
  feedback="Invalid date"
  required
/>
<DatePicker label="Success"  state="success" required />
<DatePicker
  label="Warning"
  state="warning"
  feedback="Missing date"
  required
/>
<DatePicker
  label="Alert"
  state="alert"
  feedback="Invalid date"
  required
/>

Locale

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

import Bifrost from "@intility/bifrost-react/Bifrost";
import nbNO from "@intility/bifrost-react/locales/nb-no";
import DatePicker from "@intility/bifrost-react-datepicker";

function MyApp() {
  return (
    <Bifrost locale={nbNO}>
      <DatePicker label="Startdato" />
      // ... rest of your app
    </Bifrost>
  );
}
import Bifrost from "@intility/bifrost-react/Bifrost";
import nbNO from "@intility/bifrost-react/locales/nb-no";
import DatePicker from "@intility/bifrost-react-datepicker";

function MyApp() {
  return (
    <Bifrost locale={nbNO}>
      <DatePicker label="Startdato" />
      // ... rest of your app
    </Bifrost>
  );
}

Read only

Set the datepicker to read-only with readOnly prop.

<DatePicker label="Start Date" readOnly />
<DatePicker label="Start Date" readOnly />

Disabled

Disable the datepicker with disabled prop.

<DatePicker label="Start Date" disabled />
<DatePicker label="Start Date" disabled />

Clearable

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

<DatePicker label="label" isClearable />
<DatePicker label="label" isClearable />