React Date Time Input Overview

The Ignite UI for React Date Time Input allows the user to set and edit the date and time in a chosen input element. The user can edit both date and time portions using an editable masked input. Additionally, one can specify a desired display and input format, as well as min and max values to utilize validation.

Usage

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

npm install igniteui-react

You will then need to import the IgrDateTimeInput, its necessary CSS, like so:

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

Value binding

The easiest way to set the value of the IgrDateTimeInput component is by passing a Date object to the Value property:

<IgrDateTimeInput value={someValue}></IgrDateTimeInput>

The IgrDateTimeInput also accepts ISO 8601 strings.

The string can be a full ISO string, in the format YYYY-MM-DDTHH:mm:ss.sssZ or it could be separated into date-only and time-only portions.

Date-only

If a date-only string is bound to the Value property of the component, it needs to be in the format YYYY-MM-DD. The InputFormat is still used when typing values in the input and it does not have to be in the same format. Additionally, when binding a date-only string, the directive will prevent time shifts by coercing the time to be T00:00:00.

Time-only

Time-only strings are normally not defined in the ECMA specification, however to allow the directive to be integrated in scenarios which require time-only solutions, it supports the 24 hour format - HH:mm:ss. The 12 hour format is not supported.

Full ISO string

If a full ISO string is bound, the directive will parse it only if all elements required by Date.parse are provided.

All falsy values, including InvalidDate will be parsed as null. Incomplete date-only, time-only, or full ISO strings will be parsed as InvalidDate.

Keyboard Navigation

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

Setting formats

The IgrDateTimeInput supports different display and input formats.

It uses Intl.DateTimeFormat which allows it to support predefined format options, such as long and short, medium and full. Additionally, it can also accept a custom string constructed from supported characters, such as dd-MM-yy. Also, if no DisplayFormat is provided, the component will use the InputFormat as such.

Input Format

The table bellow shows formats that are supported by the component’s InputFormat:

To set a specific input format, pass it as a string to the IgrDateTimeInput. This will set both the expected user input format and the mask. Additionally, the InputFormat is locale based, so if none is provided, the editor will default to dd/MM/yyyy.

<IgrDateTimeInput inputFormat="dd-MM-yy" displayFormat="medium"></IgrDateTimeInput>

If all went well, you should see the following in your browser:

Display format

The date time input exposes predefined formats for displaying date/time in various manners. All of the examples below are given in en-US locale.

Furthermore, users can construct a displayFormat string using the supported symbols described in the following table.

Min/max value

You can specify Min and Max properties to restrict input and control the validity of the component. Just like the Value property, they can be of type string.

 <IgrDateTimeInput min={minDate} max={maxDate}></IgrDateTimeInput>

If all went well, the component will be invalid if the value is greater or lower than the given dates. Check out the example below:

Step up/down

The IgrDateTimeInput exposes public StepUp and StepDown methods. They increment or decrement a specific DatePart of the currently set date and time and can be used in a couple of ways.

In the first scenario, if no specific DatePart is passed to the method, a default DatePart will increment or decrement, based on the specified InputFormat and the internal component implementation. In the second scenario, you can explicitly specify what DatePart to manipulate as it may suite different requirements. Also, both methods accept an optional delta parameter of type number which can be used to set the stepUp/stepDown step.

Try it in the example below:

Styling

The IgrDateTimeInput component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

igc-date-time-input {
    --_background: var(--ig-primary-200);
    --_foreground: var(--ig-gray-900);

    --input-prefix-color: var(--_foreground);
    --input-suffix-color: var(--_foreground);
    --input-prefix-color--filled: var(--_foreground);
    --input-suffix-color--filled: var(--_foreground);
    --input-prefix-background: var(--_background);
    --input-suffix-background: var(--_background);
    --input-prefix-background--filled: var(--_background);
    --input-suffix-background--filled: var(--_background);
    --input-prefix-color--focused: var(--_foreground);
    --input-suffix-color--focused: var(--_foreground);
    --input-prefix-background--focused: var(--_background);
    --input-suffix-background--focused: var(--_background);
}

API References

Additional Resources

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