React Date Picker Component Overview

The Ignite UI for React Date Picker is a feature rich component used for entering a date through manual text input or choosing date values from a calendar dialog that pops up. Lightweight and simple to use, the Date Picker lets users navigate to a desired date with several view options – month, year, and decade. It also supports common validation properties such as minimum and maximum date constraints and required fields.

The Ignite UI for React Date Picker Component lets users pick a single date through a month-view calendar dropdown or editable input field. The React Date Picker also supports a dialog mode for selection from the calendar only, locale-aware and customizable date formatting and validation integration.

React Date Picker Example

Below you can see a sample that demonstrates how the Date Picker works when users are enabled to pick a date through a manual text input and click on the calendar icon on the left to navigate to it. See how to render it.

Getting Started with React Date Picker

First, you need to install the Ignite UI for React by running the following command:

npm install igniteui-react

You will then need to import the IgrDatePicker, its necessary CSS, and register its module, like so:

import { IgrDatePicker } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

For a complete introduction to the Ignite UI for React, read the Getting Started topic.

Using the React Date Picker Component

Display Date Picker

To instantiate a IgrDatePicker in its default dropdown state, use the following code:

<IgrDatePicker></IgrDatePicker>

Options

The IgrDatePicker can be bound to a date.

const date = new Date();

<IgrDatePicker value={date}/>

Projecting components

The are prefix and suffix slots available, which allow you to add different content before and after the main content of the Input. When slotting content, we recommend using a <span> element when adding simple text, symbols, or emojis, and an <igc-icon> component when adding icons to the prefix and suffix slots.

There is also a helper-text slot exposed, which provides a hint placed below the Input. We recommend using a <span> element, when slotting content in the helper-text slot.

<IgrDatePicker>
    <IgrIcon
        slot="suffix"
        name="arrow_upward"
        collection="material"
        className="small"
        onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
    </IgrIcon>
</IgrDatePicker>

The above snippet will add an additional icon at the end of the input, right after the default clear icon. This will not remove the default toggle icon, though as prefixes and suffixes can be stacked one after the other.

Customizing the toggle and clear icons

The calendar and clear icons can be customized using the calendar and clear slots. We recommend using a <span> element when adding symbols, or emojis and an <igc-icon> component when adding icons to the calendar and clear slots.

<IgrDatePicker>
    <IgrIcon slot="calendar" name="calendar" collection="material" className="small"></IgrIcon>
    <IgrIcon slot="clear" name="delete" collection="material" className="small"></IgrIcon>
</IgrDatePicker>

Custom action buttons

The picker’s action buttons can be templated using the actions slot. For the best result, we recommend using the <igc-button> component when adding content to the actions slot.

<IgrDatePicker>
    <IgrButton
        slot='actions'
        onClick={() => datePickerRef.current.showWeekNumbers = true}>
        <span>Show Week Numbers</span>
    </IgrButton>
</IgrDatePicker>

Keyboard Navigation

The IgrDatePicker has intuitive keyboard navigation that makes it easy to increment, decrement, or jump through different DateParts among others without having to touch the mouse.

Examples

Dialog Mode

The IgrDatePicker also supports a dialog mode:

<IgrDatePicker mode="dialog"></IgrDatePicker>

Display and input format

IgrDatePicker.inputFormat and IgrDatePicker.displayFormat are properties which can be set to make the picker’s editor follow a specified format. The IgrDatePicker.inputFormat is locale based, so if none is provided, the picker will default to the one used by the browser.

A good thing to note is that the Date Picker Component will always add a leading zero on the date and month portions if they were provided in a format that does not have it, e.g. d/M/yy becomes dd/MM/yy. This applies only during editing.

IgrDatePicker.displayFormat is used to format the picker’s input when it is not focused. If no IgrDatePicker.displayFormat is provided, the picker will use the IgrDatePicker.inputFormat as its IgrDatePicker.displayFormat.

More information about these can be found in the IgrIgcDateTimeInput format section.

Increment and decrement

The IgrDatePicker exposes IgrDatePicker.stepUp and IgrDatePicker.stepDown methods. Both of which come from the IgrIgcDateTimeInput and can be used for incrementing and decrementing a specific DatePart of the currently set date.

<IgrDatePicker>
    <IgrIcon
        slot="prefix"
        name="arrow_upward"
        collection="material"
        onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
    </IgrIcon>
    <IgrIcon
        slot="suffix"
        name="arrow_downward"
        collection="material"
        onClick={() => datePickerRef.current.stepDown(DatePart.Month)}>
    </IgrIcon>
</IgrDatePicker>

In Forms

The IgrDatePicker could be used in a form element, the component’s IgrDatePicker.min and IgrDatePicker.max properties act as form validators.

In forms, we can handle the change event of the component and update the value of the label.

Calendar Specific settings

The IgrDatePicker can modify some of the calendar’s settings via the properties that the Date Picker exposes. Some of these include IgrDatePicker.visibleMonths which allows more than one calendar to be displayed when the picker expands, IgrFieldPipeArgs.weekStart which determines the starting day of the week, IgrDatePicker.showWeekNumbers which shows the number for each week in the year and more.

Internationalization

The localization of the IgrDatePicker can be controlled through its IgrDatePicker.locale input.

Here is how a IgrDatePicker with Japanese locale definition would look like:

<IgrDatePicker locale="ja-JP"></IgrDatePicker>

Styling

The IgrDatePicker component derives from the IgrInput and IgrCalendar component, so it exposes all available CSS parts. See Input Styling and Calendar Styling for reference.

igc-date-picker::part(header) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
igc-date-picker::part(calendar-content) {
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(date-inner current) {
  color: var(--ig-info-300);
  background-color: var(--ig-surface-300);
}
igc-date-picker::part(navigation-button):hover,
igc-date-picker::part(months-navigation):hover,
igc-date-picker::part(years-navigation):hover {
  color: var(--ig-secondary-500);
}
igc-date-picker::part(month-inner current),
igc-date-picker::part(year-inner current),
igc-date-picker::part(navigation-button),
igc-date-picker::part(months-navigation),
igc-date-picker::part(years-navigation) {
  color: var(--ig-info-300);
}
igc-date-picker::part(date-inner selected),
igc-date-picker::part(month-inner selected),
igc-date-picker::part(year-inner selected) {
  color: var(--ig-secondary-500-contrast);
  background-color: var(--ig-secondary-500);
}

API References

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub