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

React Wrapper for UI5 Web Components and additional components

'use client';

import '@ui5/webcomponents/dist/DateRangePicker.js';
import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * 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`:
 *
 * **Note:** Relative date values such as "today", "yesterday", or "tomorrow" are not supported.
 * Entering a relative date sets the component to an error state.
 *
 *
 * ### 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! [DateRangePicker UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/DateRangePicker) | [Repository](https://github.com/UI5/webcomponents)
 */
const DateRangePicker = withWebComponent('ui5-daterange-picker', ['accessibleDescription', 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', 'calendarWeekNumbering', 'delimiter', 'displayFormat', 'formatPattern', 'maxDate', 'minDate', 'name', 'placeholder', 'primaryCalendarType', 'secondaryCalendarType', 'value', 'valueFormat', 'valueState'], ['disabled', 'hideWeekNumbers', 'open', 'readonly', 'required', 'showClearIcon', 'showTwoMonths'], ['valueStateMessage'], ['change', 'close', 'input', 'open', 'value-state-change']);
DateRangePicker.displayName = 'DateRangePicker';
export { DateRangePicker };