@ui5/webcomponents-react/wrappers/webComponents/DateRangePicker/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import { withWebComponent } from '../../internal/withWebComponent.js';
/**
 * The DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.
 *
 * ### Usage
 * The user can enter a date by:
 * Using the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).
 * For the `DateRangePicker`
 *
 *
 * ### Keyboard Handling
 * The `DateRangePicker` provides advanced keyboard handling.
 *
 * When the `DateRangePicker` input field is focused the user can
 * increment or decrement respectively the range start or end date, depending on where the cursor is.
 * The following shortcuts are available:
 *
 * - [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
 *
 * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
 */
const DateRangePicker = withWebComponent('ui5-daterange-picker', ['accessibleName', 'accessibleNameRef', 'calendarWeekNumbering', 'delimiter', 'formatPattern', 'maxDate', 'minDate', 'name', 'placeholder', 'primaryCalendarType', 'secondaryCalendarType', 'value', 'valueState'], ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required'], ['valueStateMessage'], ['change', 'input', 'value-state-change']);
DateRangePicker.displayName = 'DateRangePicker';
export { DateRangePicker };