Skip to main content

Datepicker

Provides a mechanism for users to choose a date via a calendar.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Datepicker } from '@iag/chroma-react-ui.components';

Accessibility​

Accessibility Documentation(opens in new window)

Default​

Clear Date​

This example works for both valid and invalid dates entered.

Use onChangeRaw for validation​

Error​

Valid​

Disabled​

Initial Value​

Future Dates​

isOutsideRange={(day) => day.startOf('day').isBefore(moment().startOf('day'))}

Past Dates​

isOutsideRange={(day) => day.startOf('day').isAfter(moment().startOf('day'))}

Calendar Modal​

withPortal

Calendar Direction​

openDirection = down || up

Properties​

Name
Description
  • className
    stringAdditional CSS classes to be applied
  • id
    stringHTML id attribute for the component
  • error
    booleanIndicates if there is an error state
  • valid
    booleanIndicates if the input value is valid
  • value
    anyThe selected date value
  • placeholder
    stringPlaceholder text when no date is selected
  • ariaLabel
    stringAria label for accessibility
  • screenReaderInputMessage
    stringScreen reader message for the input
  • required
    booleanIndicates if the field is required
  • optional
    booleanIndicates if the field is optional
  • disabled
    booleanIndicates if the DatePicker is disabled
  • initialVisibleMonth
    () => moment.Moment
  • isOutsideRange
    (day: moment.Moment) => booleanFunction to determine if a day is outside the valid range
  • isDayBlocked
    (day: moment.Moment) => booleanFunction to determine if a day is blocked
  • numberOfMonths
    numberNumber of months to display in the calendar
  • firstDayOfWeek
    DayOfWeekShapeThe first day of the week (0 for Sunday, 1 for Monday, etc.)
  • onBlur
    (e: FocusEvent<Element, Element>) => voidCallback function when the input loses focus
  • onChange*
    (dateObject: any) => voidCallback function when the date value changes
  • onChangeRaw
    (s: string) => voidCallback function when the raw input value changes
  • displayFormat
    stringThe format to display the selected date
  • monthFormat
    stringThe format to display the month
  • hideKeyboardShortcutsPanel
    booleanIndicates whether to hide the keyboard shortcuts panel
  • withPortal
    booleanIndicates whether to render the calendar in a portal
  • readOnly
    booleanIndicates whether the DatePicker is read-only
  • openDirection
    "up" | "down"The direction in which the calendar opens ('up' or 'down')

CSS Variables​