14.3.0 [Current] 13.3.1 [Past] 12.7.4 [Past]

DatePicker

import DatePicker from '@concur/nui-widgets/lib/DatePicker/DatePicker';

The DatePicker component allows the entry of dates, validation of date strings, and the formatted display of dates. It uses an <input> element for date entry and display, and includes a calendar popover for selecting a date using the keyboard or mouse. It’s based on the Fundamental React DatePicker component. We recommend preparing to migrate to this DatePicker from the current DatePicker, as we plan to adopt more Fundamental React components under the hood in the future. This DatePicker addresses various accessibility issues, and will be the component to move forward with as we adopt SAP’s Fiori guidelines.

Examples

Default

The following demonstrates a default DatePicker with no customizations. For a full set of examples, see the main Fundamental React site.

<DatePicker buttonLabel='Open Calendar' />

Date Format

The dateFormat property is useful for formatting and validating dates. It is also shown as the placeholder for the <input> element. Formats are those allowed by the Moment.js project.

If the dateFormat property is set to one of the following: MM/DD/YYYY, DD/MM/YYYY, YYYY/MM/DD (including using . or - as separators), any valid keyed input dates will be automatically formatted to match the supplied dateFormat property. For example, with the dateFormat property set to MM/DD/YYYY, keyed entries of 4/1/20, 04.1.2020, 4-01-20, etc will be reformatted to 04/01/2020 when onBlur is triggered by leaving the input field.

<DatePicker buttonLabel='Open Calendar' />

<DatePicker buttonLabel='Open Calendar' dateFormat='DD-MM-YYYY' />

<DatePicker buttonLabel='Open Calendar' dateFormat='YYYY.MM.DD' />

Date Range

The [enableRangeSelection] property is useful for allowing the selection of a range of dates.

<DatePicker enableRangeSelection />

Disabled State

Set the disabled property to change the DatePicker’s state to disabled.

<DatePicker buttonLabel='Open Calendar' disabled />

ReadOnly State

Set the readOnly property to change the DatePicker’s state to readOnly. A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.

<DatePicker buttonLabel='Open Calendar' readOnly />

Today Button

<DatePicker
    buttonLabel='Open Calendar'
    localizedText={{
        calendarInstructions: 'Use arrow keys to move between dates.',
        nextMonth: 'Next month',
        previousMonth: 'Previous month',
        show12NextYears: 'Show 12 next years',
        show12PreviousYears: 'Show 12 previous years'
    }}
    todayAction={{
        type: 'select',
        label: 'Today'
    }} />

Validation States

<DatePicker validationState={{ state: 'success', text: 'Test validation message' }} />

<DatePicker validationState={{ state: 'error', text: 'Test validation message' }} />

<DatePicker validationState={{ state: 'warning', text: 'Test validation message' }} />

<DatePicker validationState={{ state: 'information', text: 'Test validation message' }} />

Keyboard Shortcuts

When the DatePicker popover is open and contains focus, it is possible to quickly navigate through days, weeks, months, and years using the following shortcuts:

Usage

Properties

Callbacks

Localized Text