@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/DateComponentBase.d.ts

@@ -12,7 +12,6 @@ import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDat
  *  - "languageAware: true" metadata setting, CLDR fetch and i18n initialization
  *  - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them
  *  - additional common methods
- *
  * @constructor
  * @abstract
  * @extends UI5Element
@@ -22,7 +21,6 @@ declare class DateComponentBase extends UI5Element {
     /**
      * Sets a calendar type used for display.
      * If not set, the calendar type of the global configuration is used.
-     *
      * @default undefined
      * @public
      */
@@ -30,7 +28,6 @@ declare class DateComponentBase extends UI5Element {
     /**
      * Defines the secondary calendar type.
      * If not set, the calendar will only show the primary calendar type.
-     *
      * @since 1.0.0-rc.16
      * @default undefined
      * @public
@@ -38,7 +35,6 @@ declare class DateComponentBase extends UI5Element {
     secondaryCalendarType?: `${CalendarType}`;
     /**
      * Determines the format, displayed in the input field.
-     *
      * @default ""
      * @public
      */
@@ -46,8 +42,7 @@ declare class DateComponentBase extends UI5Element {
     /**
      * Determines the minimum date available for selection.
      *
-     * <b>Note:</b> If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).
-     *
+     * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).
      * @default ""
      * @since 1.0.0-rc.6
      * @public
@@ -56,8 +51,7 @@ declare class DateComponentBase extends UI5Element {
     /**
      * Determines the maximum date available for selection.
      *
-     * <b>Note:</b> If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).
-     *
+     * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).
      * @default ""
      * @since 1.0.0-rc.6
      * @public
@@ -67,7 +61,6 @@ declare class DateComponentBase extends UI5Element {
     /**
      * Cached instance of DateFormat with a format pattern of "YYYY-MM-dd".
      * Used by the getISOFormat method to avoid creating a new DateFormat instance on each call.
-     *
      * @private
      */
     _isoFormatInstance?: DateFormat;

package/dist/DateComponentBase.js

@@ -18,6 +18,7 @@ import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import { getMaxCalendarDate, getMinCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
 /**
  * @class
  *
@@ -26,7 +27,6 @@ import { getMaxCalendarDate, getMinCalendarDate } from "@ui5/webcomponents-local
  *  - "languageAware: true" metadata setting, CLDR fetch and i18n initialization
  *  - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them
  *  - additional common methods
- *
  * @constructor
  * @abstract
  * @extends UI5Element
@@ -88,7 +88,7 @@ let DateComponentBase = DateComponentBase_1 = class DateComponentBase extends UI
         }
     }
     _getStringFromTimestamp(timestamp) {
-        const localDate = new Date(timestamp);
+        const localDate = UI5Date.getInstance(timestamp);
         return this.getFormat().format(localDate, true);
     }
     getFormat() {

package/dist/DateComponentBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateComponentBase.js","sourceRoot":"","sources":["../src/DateComponentBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport { fetchCldr } from \"@ui5/webcomponents-base/dist/asset-registries/LocaleData.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getCalendarType, getSecondaryCalendarType } from \"@ui5/webcomponents-base/dist/config/CalendarType.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport CalendarType from \"@ui5/webcomponents-base/dist/types/CalendarType.js\";\nimport getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\nimport CalendarDate from \"@ui5/webcomponents-localization/dist/dates/CalendarDate.js\";\nimport { getMaxCalendarDate, getMinCalendarDate } from \"@ui5/webcomponents-localization/dist/dates/ExtremeDates.js\";\n\n/**\n * @class\n *\n * Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker)\n * This includes:\n *  - \"languageAware: true\" metadata setting, CLDR fetch and i18n initialization\n *  - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them\n *  - additional common methods\n *\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n@customElement({\n\tlanguageAware: true,\n\trenderer: litRender,\n})\nclass DateComponentBase extends UI5Element {\n\t/**\n\t * Sets a calendar type used for display.\n\t * If not set, the calendar type of the global configuration is used.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: CalendarType })\n\tprimaryCalendarType?: `${CalendarType}`;\n\n\t/**\n\t * Defines the secondary calendar type.\n\t * If not set, the calendar will only show the primary calendar type.\n\t *\n\t * @since 1.0.0-rc.16\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: CalendarType })\n\tsecondaryCalendarType?: `${CalendarType}`;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tformatPattern!: string;\n\n\t/**\n\t * Determines the minimum date available for selection.\n\t *\n\t * <b>Note:</b> If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).\n\t *\n\t * @default \"\"\n\t * @since 1.0.0-rc.6\n\t * @public\n\t */\n\t@property()\n\tminDate!: string;\n\n\t/**\n\t * Determines the maximum date available for selection.\n\t *\n\t * <b>Note:</b> If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).\n\t *\n\t * @default \"\"\n\t * @since 1.0.0-rc.6\n\t * @public\n\t */\n\t@property()\n\tmaxDate!: string;\n\n\tstatic i18nBundle?: I18nBundle;\n\n\t/**\n\t * Cached instance of DateFormat with a format pattern of \"YYYY-MM-dd\".\n\t * Used by the getISOFormat method to avoid creating a new DateFormat instance on each call.\n\t *\n\t * @private\n\t */\n\t_isoFormatInstance?: DateFormat;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tget _primaryCalendarType() {\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();\n\t}\n\n\tget _secondaryCalendarType() {\n\t\treturn this.secondaryCalendarType || getSecondaryCalendarType();\n\t}\n\n\tget _minDate() {\n\t\tlet minDate;\n\n\t\tif (this.minDate) {\n\t\t\tminDate = this._getMinMaxCalendarDateFromString(this.minDate);\n\t\t}\n\n\t\treturn minDate || getMinCalendarDate(this._primaryCalendarType);\n\t}\n\n\tget _maxDate() {\n\t\tlet maxDate;\n\n\t\tif (this.maxDate) {\n\t\t\tmaxDate = this._getMinMaxCalendarDateFromString(this.maxDate)!;\n\t\t}\n\n\t\treturn maxDate || getMaxCalendarDate(this._primaryCalendarType);\n\t}\n\n\tget _formatPattern() {\n\t\treturn this.formatPattern || \"medium\"; // get from config\n\t}\n\n\tget _isPattern() {\n\t\treturn this._formatPattern !== \"medium\" && this._formatPattern !== \"short\" && this._formatPattern !== \"long\";\n\t}\n\n\tget hasSecondaryCalendarType() {\n\t\treturn !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType;\n\t}\n\n\t_getMinMaxCalendarDateFromString(date: string) {\n\t\tif (this.getFormat().parse(date)) {\n\t\t\treturn this._getCalendarDateFromString(date);\n\t\t}\n\n\t\tconst jsDate = this.getISOFormat().parse(date) as Date;\n\t\tif (jsDate) {\n\t\t\treturn CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);\n\t\t}\n\t}\n\n\t_getCalendarDateFromString(value: string) {\n\t\tconst jsDate = this.getFormat().parse(value) as Date;\n\t\tif (jsDate) {\n\t\t\treturn CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);\n\t\t}\n\t}\n\n\t_getTimeStampFromString(value: string) {\n\t\tconst calDate = this._getCalendarDateFromString(value);\n\t\tif (calDate) {\n\t\t\treturn calDate.toUTCJSDate().valueOf();\n\t\t}\n\t}\n\n\t_getStringFromTimestamp(timestamp: number) {\n\t\tconst localDate = new Date(timestamp);\n\t\treturn this.getFormat().format(localDate, true);\n\t}\n\n\tgetFormat() {\n\t\treturn this._isPattern\n\t\t\t? DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t})\n\t\t\t: DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tstyle: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tgetISOFormat() {\n\t\tif (!this._isoFormatInstance) {\n\t\t\tthis._isoFormatInstance = DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: \"YYYY-MM-dd\",\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t\t}\n\t\treturn this._isoFormatInstance;\n\t}\n\n\tstatic async onDefine() {\n\t\t[DateComponentBase.i18nBundle] = await Promise.all([\n\t\t\tgetI18nBundle(\"@ui5/webcomponents\"),\n\t\t\tfetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),\n\t\t]);\n\t}\n}\n\nexport default DateComponentBase;\n"]}
+{"version":3,"file":"DateComponentBase.js","sourceRoot":"","sources":["../src/DateComponentBase.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport { fetchCldr } from \"@ui5/webcomponents-base/dist/asset-registries/LocaleData.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getCalendarType, getSecondaryCalendarType } from \"@ui5/webcomponents-base/dist/config/CalendarType.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport CalendarType from \"@ui5/webcomponents-base/dist/types/CalendarType.js\";\nimport getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\nimport CalendarDate from \"@ui5/webcomponents-localization/dist/dates/CalendarDate.js\";\nimport { getMaxCalendarDate, getMinCalendarDate } from \"@ui5/webcomponents-localization/dist/dates/ExtremeDates.js\";\nimport UI5Date from \"@ui5/webcomponents-localization/dist/dates/UI5Date.js\";\n\n/**\n * @class\n *\n * Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker)\n * This includes:\n *  - \"languageAware: true\" metadata setting, CLDR fetch and i18n initialization\n *  - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them\n *  - additional common methods\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n@customElement({\n\tlanguageAware: true,\n\trenderer: litRender,\n})\nclass DateComponentBase extends UI5Element {\n\t/**\n\t * Sets a calendar type used for display.\n\t * If not set, the calendar type of the global configuration is used.\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: CalendarType })\n\tprimaryCalendarType?: `${CalendarType}`;\n\n\t/**\n\t * Defines the secondary calendar type.\n\t * If not set, the calendar will only show the primary calendar type.\n\t * @since 1.0.0-rc.16\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: CalendarType })\n\tsecondaryCalendarType?: `${CalendarType}`;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tformatPattern!: string;\n\n\t/**\n\t * Determines the minimum date available for selection.\n\t *\n\t * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).\n\t * @default \"\"\n\t * @since 1.0.0-rc.6\n\t * @public\n\t */\n\t@property()\n\tminDate!: string;\n\n\t/**\n\t * Determines the maximum date available for selection.\n\t *\n\t * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).\n\t * @default \"\"\n\t * @since 1.0.0-rc.6\n\t * @public\n\t */\n\t@property()\n\tmaxDate!: string;\n\n\tstatic i18nBundle?: I18nBundle;\n\n\t/**\n\t * Cached instance of DateFormat with a format pattern of \"YYYY-MM-dd\".\n\t * Used by the getISOFormat method to avoid creating a new DateFormat instance on each call.\n\t * @private\n\t */\n\t_isoFormatInstance?: DateFormat;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tget _primaryCalendarType() {\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();\n\t}\n\n\tget _secondaryCalendarType() {\n\t\treturn this.secondaryCalendarType || getSecondaryCalendarType();\n\t}\n\n\tget _minDate() {\n\t\tlet minDate;\n\n\t\tif (this.minDate) {\n\t\t\tminDate = this._getMinMaxCalendarDateFromString(this.minDate);\n\t\t}\n\n\t\treturn minDate || getMinCalendarDate(this._primaryCalendarType);\n\t}\n\n\tget _maxDate() {\n\t\tlet maxDate;\n\n\t\tif (this.maxDate) {\n\t\t\tmaxDate = this._getMinMaxCalendarDateFromString(this.maxDate)!;\n\t\t}\n\n\t\treturn maxDate || getMaxCalendarDate(this._primaryCalendarType);\n\t}\n\n\tget _formatPattern() {\n\t\treturn this.formatPattern || \"medium\"; // get from config\n\t}\n\n\tget _isPattern() {\n\t\treturn this._formatPattern !== \"medium\" && this._formatPattern !== \"short\" && this._formatPattern !== \"long\";\n\t}\n\n\tget hasSecondaryCalendarType() {\n\t\treturn !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType;\n\t}\n\n\t_getMinMaxCalendarDateFromString(date: string) {\n\t\tif (this.getFormat().parse(date)) {\n\t\t\treturn this._getCalendarDateFromString(date);\n\t\t}\n\n\t\tconst jsDate = this.getISOFormat().parse(date) as Date;\n\t\tif (jsDate) {\n\t\t\treturn CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);\n\t\t}\n\t}\n\n\t_getCalendarDateFromString(value: string) {\n\t\tconst jsDate = this.getFormat().parse(value) as Date;\n\t\tif (jsDate) {\n\t\t\treturn CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);\n\t\t}\n\t}\n\n\t_getTimeStampFromString(value: string) {\n\t\tconst calDate = this._getCalendarDateFromString(value);\n\t\tif (calDate) {\n\t\t\treturn calDate.toUTCJSDate().valueOf();\n\t\t}\n\t}\n\n\t_getStringFromTimestamp(timestamp: number) {\n\t\tconst localDate = UI5Date.getInstance(timestamp);\n\t\treturn this.getFormat().format(localDate, true);\n\t}\n\n\tgetFormat() {\n\t\treturn this._isPattern\n\t\t\t? DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t})\n\t\t\t: DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tstyle: this._formatPattern,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tgetISOFormat() {\n\t\tif (!this._isoFormatInstance) {\n\t\t\tthis._isoFormatInstance = DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: \"YYYY-MM-dd\",\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t\t}\n\t\treturn this._isoFormatInstance;\n\t}\n\n\tstatic async onDefine() {\n\t\t[DateComponentBase.i18nBundle] = await Promise.all([\n\t\t\tgetI18nBundle(\"@ui5/webcomponents\"),\n\t\t\tfetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),\n\t\t]);\n\t}\n}\n\nexport default DateComponentBase;\n"]}

package/dist/DatePicker.d.ts

@@ -1,21 +1,24 @@
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import CalendarPickersMode from "./types/CalendarPickersMode.js";
-import type FormSupportT from "./features/InputElementsFormSupport.js";
-import type { IFormElement } from "./features/InputElementsFormSupport.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
-import HasPopup from "./types/HasPopup.js";
 import DateComponentBase from "./DateComponentBase.js";
 import ResponsivePopover from "./ResponsivePopover.js";
-import type { CalendarSelectedDatesChangeEventDetail } from "./Calendar.js";
+import type { CalendarSelectionChangeEventDetail } from "./Calendar.js";
 import Input from "./Input.js";
 import InputType from "./types/InputType.js";
+import IconMode from "./types/IconMode.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
 type DatePickerChangeEventDetail = {
     value: string;
     valid: boolean;
 };
+type DatePickerValueStateChangeEventDetail = {
+    valueState: `${ValueState}`;
+    valid: boolean;
+};
 type DatePickerInputEventDetail = {
     value: string;
     valid: boolean;
@@ -23,92 +26,86 @@ type DatePickerInputEventDetail = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-date-picker</code> component provides an input field with assigned calendar which opens on user action.
- * The <code>ui5-date-picker</code> allows users to select a localized date using touch,
+ * The `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.
+ * The `ui5-date-picker` 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.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
  * The user can enter a date by:
- * <ul>
- * <li>Using the calendar that opens in a popup</li>
- * <li>Typing it in directly in the input field</li>
- * </ul>
- * <br><br>
+ *
+ * - 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.
  *
- * <h3>Formatting</h3>
+ * ### Formatting
  *
  * If a date is entered by typing it into
  * the input field, it must fit to the used date format.
- * <br><br>
+ *
  * Supported format options are pattern-based on Unicode LDML Date Format notation.
- * For more information, see <ui5-link target="_blank" href="http://unicode.org/reports/tr35/#Date_Field_Symbol_Table">UTS #35: Unicode Locale Data Markup Language</ui5-link>.
- * <br><br>
- * For example, if the <code>format-pattern</code> is "yyyy-MM-dd",
+ * 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.
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-date-picker</code> provides advanced keyboard handling.
- * If the <code>ui5-date-picker</code> is focused,
- * you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
- * Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys
- * to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can
+ * ### Keyboard Handling
+ * The `ui5-date-picker` provides advanced keyboard handling.
+ * If the `ui5-date-picker` 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.
- * <br>
  *
- * If the <code>ui5-date-picker</code> input field is focused and its corresponding picker dialog is not opened,
- * then users can increment or decrement the date referenced by <code>dateValue</code> property
+ * If the `ui5-date-picker` 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:
- * <br>
- * <ul>
- * <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li>
- * <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li>
- * <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li>
- * <li>[PAGEUP] - Increments the corresponding day of the month by one</li>
- * <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li>
- * <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li>
- * </ul>
  *
- * <h3>Calendar types</h3>
+ * - [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 <code>primaryCalendarType</code> property and import one or more of the following modules:
- * <br><br>
+ * you need to set the `primaryCalendarType` property and import one or more of the following modules:
  *
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";</code>
- * <br><br>
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";`
  *
- * Or, you can use the global configuration and set the <code>calendarType</code> key:
- * <br>
- * <pre><code>&lt;script data-id="sap-ui-config" type="application/json"&gt;
- * {
- *	"calendarType": "Japanese"
- * }
- * &lt;/script&gt;</code></pre>
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";`
  *
- * <h3>ES6 Module Import</h3>
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";`
  *
- * <code>import "@ui5/webcomponents/dist/DatePicker";</code>
+ * `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>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/DatePicker.js";`
  * @constructor
  * @extends DateComponentBase
  * @public
  */
-declare class DatePicker extends DateComponentBase implements IFormElement {
+declare class DatePicker extends DateComponentBase implements IFormInputElement {
     /**
      * Defines a formatted date value.
-     *
      * @default ""
      * @formEvents change input
      * @formProperty
@@ -117,14 +114,12 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
     value: string;
     /**
      * Defines the value state of the component.
-     *
      * @default "None"
      * @public
      */
     valueState: `${ValueState}`;
     /**
      * Defines whether the component is required.
-     *
      * @since 1.0.0-rc.9
      * @default false
      * @public
@@ -132,14 +127,12 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
     required: boolean;
     /**
      * Determines whether the component is displayed as disabled.
-     *
      * @default false
      * @public
      */
     disabled: boolean;
     /**
      * Determines whether the component is displayed as read-only.
-     *
      * @default false
      * @public
      */
@@ -148,45 +141,39 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
      * Defines a short hint, intended to aid the user with data entry when the
      * component has no value.
      *
-     * <br><br>
-     * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
+     * **Note:** When no placeholder is set, the format pattern is displayed as a placeholder.
      * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
-     *
      * @default undefined
      * @public
      */
     placeholder?: string;
     /**
-     * Determines the name with which the component will be submitted in an HTML form.
-     *
-     * <br><br>
-     * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
-     * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-     *
-     * <br><br>
-     * <b>Note:</b> When set, a native <code>input</code> HTML element
-     * will be created inside the component so that it can be submitted as
-     * part of an HTML form. Do not use this property unless you need to submit a form.
+     * Determines the name by which the component will be identified upon submission in an HTML form.
      *
+     * **Note:** This property is only applicable within the context of an HTML Form element.
      * @default ""
      * @public
      */
     name: string;
     /**
      * Defines the visibility of the week numbers column.
-     * <br><br>
      *
-     * <b>Note:</b> For calendars other than Gregorian,
+     * **Note:** For calendars other than Gregorian,
      * the week numbers are not displayed regardless of what is set.
-     *
      * @default false
      * @public
      * @since 1.0.0-rc.8
      */
     hideWeekNumbers: boolean;
+    /**
+     * Defines the open or closed state of the popover.
+     * @public
+     * @default false
+     * @since 2.0
+     */
+    open: boolean;
     /**
      * Defines the aria-label attribute for the component.
-     *
      * @default ""
      * @public
      * @since 1.0.0-rc.15
@@ -194,47 +181,39 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
     accessibleName: string;
     /**
      * Receives id(or many ids) of the elements that label the component.
-     *
      * @default ""
      * @public
      * @since 1.0.0-rc.15
      */
     accessibleNameRef: string;
-    _isPickerOpen: boolean;
     _respPopoverConfig: object;
     _calendarCurrentPicker: string;
     liveValue?: string;
     /**
      * Defines the value state message that will be displayed as pop up under the component.
-     * <br><br>
      *
-     * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
-     * <br>
-     * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
-     * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+     * **Note:** If not specified, a default text (in the respective language) will be displayed.
      *
+     * **Note:** The `valueStateMessage` would be displayed,
+     * when the component is in `Information`, `Warning` or `Error` value state.
      * @since 1.0.0-rc.7
      * @public
      */
     valueStateMessage: Array<HTMLElement>;
-    /**
-     * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
-     * when <code>name</code> property is set.
-     *
-     * @private
-     */
-    formSupport: Array<HTMLElement>;
     responsivePopover?: ResponsivePopover;
-    FormSupport?: typeof FormSupportT;
     static i18nBundle: I18nBundle;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): FormData | string | null;
     /**
      * @protected
      */
     onResponsivePopoverAfterClose(): void;
+    onResponsivePopoverBeforeOpen(): void;
     onBeforeRendering(): void;
     /**
      * Override in derivatives to change calendar selection mode
-     *
      * @protected
      */
     get _calendarSelectionMode(): string;
@@ -242,14 +221,12 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
      * Used to provide a timestamp to the Calendar (to focus it to a relevant date when open) based on the component's state
      * Override in derivatives to provide the calendar a timestamp based on their properties
      * By default focus the calendar on the selected date if set, or the current day otherwise
-     *
      * @protected
      */
     get _calendarTimestamp(): number;
     /**
      * Used to provide selectedDates to the calendar based on the component's state
      * Override in derivatives to provide different rules for setting the calendar's selected dates
-     *
      * @protected
      */
     get _calendarSelectedDates(): Array<string>;
@@ -263,29 +240,24 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
     _modifyDateValue(amount: number, unit: string, preserveDate?: boolean): void;
     _updateValueAndFireEvents(value: string, normalizeValue: boolean, events: Array<string>, updateValue?: boolean): void;
     _updateValueState(): void;
-    _toggleAndFocusInput(): void;
     _getInput(): Input;
     /**
      * The ui5-input "submit" event handler - fire change event when the user presses enter
-     *
      * @protected
      */
     _onInputSubmit(): void;
     /**
      * The ui5-input "change" event handler - fire change event when the user focuses out of the input
-     *
      * @protected
      */
     _onInputChange(e: Event): void;
     /**
      * The ui5-input "input" event handler - fire input even when the user types
-     *
      * @protected
      */
     _onInputInput(e: KeyboardEvent): void;
     /**
      * Checks if the provided value is valid and within valid range.
-     *
      * @protected
      * @param value
      */
@@ -293,21 +265,18 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
     _click(e: MouseEvent): void;
     /**
      * Checks if a value is valid against the current date format of the DatePicker.
-     *
      * @public
      * @param value A value to be tested against the current date format
      */
     isValid(value: string): boolean;
     /**
      * Checks if a date is between the minimum and maximum date.
-     *
      * @public
      * @param value A value to be checked
      */
     isInValidRange(value: string): boolean;
     /**
      * The parser understands many formats, but we need one format
-     *
      * @protected
      */
     normalizeValue(value: string): string;
@@ -322,8 +291,7 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
     get showFooter(): boolean;
     get accInfo(): {
         ariaRoledescription: string;
-        ariaHasPopup: HasPopup;
-        ariaAutoComplete: string;
+        ariaHasPopup: string;
         ariaRequired: boolean;
         ariaLabel: string | undefined;
     };
@@ -332,26 +300,27 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
     get dateAriaDescription(): string;
     /**
      * Defines whether the dialog on mobile should have header
-     *
      * @private
      */
     get _shouldHideHeader(): boolean;
+    /**
+     * Returns the first picker depending on the CalendarPickerMode
+     */
+    get firstPicker(): string;
     /**
      * Defines whether the value help icon is hidden
-     *
      * @private
      */
-    get _ariaHidden(): boolean;
-    _respPopover(): Promise<ResponsivePopover>;
+    get _iconMode(): IconMode.Decorative | IconMode.Interactive;
+    _respPopover(): ResponsivePopover;
     _canOpenPicker(): boolean;
     get _calendarPickersMode(): CalendarPickersMode;
     /**
      * The user selected a new date in the calendar
-     *
      * @param e
      * @protected
      */
-    onSelectedDatesChange(e: CustomEvent<CalendarSelectedDatesChangeEventDetail>): void;
+    onSelectedDatesChange(e: CustomEvent<CalendarSelectionChangeEventDetail>): void;
     /**
      * The user clicked the "month" button in the header
      */
@@ -362,37 +331,16 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
     onHeaderShowYearPress(): void;
     /**
      * Formats a Java Script date object into a string representing a locale date
-     * according to the <code>formatPattern</code> property of the DatePicker instance
-     *
+     * according to the `formatPattern` property of the DatePicker instance
      * @public
      * @param date A Java Script date object to be formatted as string
      * @returns The date as string
      */
     formatValue(date: Date): string;
-    /**
-     * Closes the picker.
-     *
-     * @public
-     */
-    closePicker(): void;
-    /**
-     * Opens the picker.
-     *
-     * @public
-     * @returns Resolves when the picker is open
-     */
-    openPicker(): Promise<void>;
-    togglePicker(): void;
-    /**
-     * Checks if the picker is open.
-     *
-     * @public
-     * @returns true if the picker is open, false otherwise
-     */
-    isOpen(): boolean;
+    _togglePicker(): void;
+    _toggleAndFocusInput(): void;
     /**
      * Currently selected date represented as a Local JavaScript Date instance.
-     *
      * @public
      * @default null
      */
@@ -406,4 +354,4 @@ declare class DatePicker extends DateComponentBase implements IFormElement {
     get type(): InputType;
 }
 export default DatePicker;
-export type { DatePickerChangeEventDetail, DatePickerInputEventDetail, };
+export type { DatePickerChangeEventDetail, DatePickerInputEventDetail, DatePickerValueStateChangeEventDetail, };