@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
80 lines (79 loc) • 3.89 kB
JavaScript
'use client';
import '@ui5/webcomponents/dist/DatePicker.js';
import { withWebComponent } from '../../internal/withWebComponent.js';
/**
* The `DatePicker` component provides an input field with assigned calendar which opens on user action.
* The `DatePicker` allows users to select a localized date using touch,
* mouse, or keyboard input. It consists of two parts: the date input field and the
* date picker.
*
* ### Usage
*
* The user can enter a date by:
*
* - Using the calendar that opens in a popup
* - Typing it in directly in the input field
*
* When the user makes an entry and presses the enter key, the calendar shows the corresponding date.
* When the user directly triggers the calendar display, the actual date is displayed.
*
* ### Formatting
*
* If a date is entered by typing it into
* the input field, it must fit to the used date format.
*
* Supported format options are pattern-based on Unicode LDML Date Format notation.
* For more information, see [UTS #35: Unicode Locale Data Markup Language](http://unicode.org/reports/tr35/#Date_Field_Symbol_Table).
*
* For example, if the `format-pattern` is "yyyy-MM-dd",
* a valid value string is "2015-07-30" and the same is displayed in the input.
*
* ### Keyboard Handling
* The `DatePicker` provides advanced keyboard handling.
* If the `DatePicker` is focused,
* you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.
* Once the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys
* to navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can
* use TAB to reach the buttons for changing month and year.
*
* If the `DatePicker` input field is focused and its corresponding picker dialog is not opened,
* then users can increment or decrement the date referenced by `dateValue` property
* by using the following shortcuts:
*
* - [Page Down] - Decrements the corresponding day of the month by one
* - [Shift] + [Page Down] - Decrements the corresponding month by one
* - [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one
* - [Page Up] - Increments the corresponding day of the month by one
* - [Shift] + [Page Up] - Increments the corresponding month by one
* - [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one
*
* ### Calendar types
* The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
* By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,
* you need to set the `primaryCalendarType` property and import one or more of the following modules:
*
* `import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";`
*
* `import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";`
*
* `import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";`
*
* `import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";`
*
* Or, you can use the global configuration and set the `calendarType` key:
*
* ```html
* <script data-id="sap-ui-config" type="application/json">
* {
* "calendarType": "Japanese"
* }
* <script>
* ```
*
*
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
*/
const DatePicker = withWebComponent('ui5-date-picker', ['accessibleName', 'accessibleNameRef', 'calendarWeekNumbering', 'formatPattern', 'maxDate', 'minDate', 'name', 'placeholder', 'primaryCalendarType', 'secondaryCalendarType', 'value', 'valueState'], ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'], ['valueStateMessage'], ['change', 'input', 'value-state-change']);
DatePicker.displayName = 'DatePicker';
export { DatePicker };