@ui5/webcomponents 2.13.2 → 2.14.0-rc.0

package/dist/DateComponentBase.d.ts

@@ -36,9 +36,24 @@ declare class DateComponentBase extends UI5Element {
     /**
      * Determines the format, displayed in the input field.
      * @default undefined
+     * @deprecated
      * @public
      */
     formatPattern?: string;
+    /**
+     * Determines the format, displayed in the input field.
+     * @default undefined
+     * @since 2.14.0
+     * @public
+     */
+    displayFormat?: string;
+    /**
+     * Determines the format, used for the value attribute.
+     * @default undefined
+     * @since 2.14.0
+     * @public
+     */
+    valueFormat?: string;
     /**
      * Determines the minimum date available for selection.
      *
@@ -79,12 +94,21 @@ declare class DateComponentBase extends UI5Element {
     get _maxDate(): CalendarDate;
     get _formatPattern(): string;
     get _isPattern(): boolean;
+    get _isValueFormatPattern(): boolean;
+    get _isDisplayFormatPattern(): boolean;
     get hasSecondaryCalendarType(): boolean;
     _getMinMaxCalendarDateFromString(date: string): CalendarDate | undefined;
     _getCalendarDateFromString(value: string): CalendarDate | undefined;
+    _getCalendarDateFromStringDisplayValue(value: string): CalendarDate | undefined;
     _getTimeStampFromString(value: string): number | undefined;
     _getStringFromTimestamp(timestamp: number): string;
+    _getDisplayStringFromTimestamp(timestamp: number): string;
+    _getValueStringFromTimestamp(timestamp: number): string;
     getFormat(): import("sap/ui/core/format/DateFormat").default;
+    get _displayFormat(): string;
+    get _valueFormat(): string;
+    getDisplayFormat(): import("sap/ui/core/format/DateFormat").default;
+    getValueFormat(): import("sap/ui/core/format/DateFormat").default;
     getISOFormat(): DateFormat;
 }
 export default DateComponentBase;

package/dist/DateComponentBase.js

@@ -86,6 +86,12 @@ let DateComponentBase = class DateComponentBase extends UI5Element {
     get _isPattern() {
         return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
     }
+    get _isValueFormatPattern() {
+        return this._valueFormat !== "medium" && this._valueFormat !== "short" && this._valueFormat !== "long";
+    }
+    get _isDisplayFormatPattern() {
+        return this._displayFormat !== "medium" && this._displayFormat !== "short" && this._displayFormat !== "long";
+    }
     get hasSecondaryCalendarType() {
         return !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType;
     }
@@ -99,7 +105,13 @@ let DateComponentBase = class DateComponentBase extends UI5Element {
         }
     }
     _getCalendarDateFromString(value) {
-        const jsDate = this.getFormat().parse(value);
+        const jsDate = this.getValueFormat().parse(value);
+        if (jsDate) {
+            return CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);
+        }
+    }
+    _getCalendarDateFromStringDisplayValue(value) {
+        const jsDate = this.getDisplayFormat().parse(value);
         if (jsDate) {
             return CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);
         }
@@ -111,9 +123,26 @@ let DateComponentBase = class DateComponentBase extends UI5Element {
         }
     }
     _getStringFromTimestamp(timestamp) {
+        if (!timestamp) {
+            return "";
+        }
         const localDate = UI5Date.getInstance(timestamp);
         return this.getFormat().format(localDate, true);
     }
+    _getDisplayStringFromTimestamp(timestamp) {
+        if (!timestamp) {
+            return "";
+        }
+        const localDate = UI5Date.getInstance(timestamp);
+        return this.getDisplayFormat().format(localDate, true);
+    }
+    _getValueStringFromTimestamp(timestamp) {
+        if (!timestamp) {
+            return "";
+        }
+        const localDate = UI5Date.getInstance(timestamp);
+        return this.getValueFormat().format(localDate, true);
+    }
     getFormat() {
         return this._isPattern
             ? DateFormat.getDateInstance({
@@ -127,6 +156,50 @@ let DateComponentBase = class DateComponentBase extends UI5Element {
                 calendarType: this._primaryCalendarType,
             });
     }
+    get _displayFormat() {
+        if (this.displayFormat) {
+            return this.displayFormat;
+        }
+        return this._formatPattern;
+    }
+    get _valueFormat() {
+        if (this.valueFormat) {
+            return this.valueFormat;
+        }
+        if (this._formatPattern) {
+            return this._formatPattern;
+        }
+        return "";
+    }
+    getDisplayFormat() {
+        return this._isDisplayFormatPattern
+            ? DateFormat.getDateInstance({
+                strictParsing: true,
+                pattern: this._displayFormat,
+                calendarType: this._primaryCalendarType,
+            })
+            : DateFormat.getDateInstance({
+                strictParsing: true,
+                style: this._displayFormat,
+                calendarType: this._primaryCalendarType,
+            });
+    }
+    getValueFormat() {
+        if (!this._valueFormat) {
+            return this.getISOFormat();
+        }
+        return this._isValueFormatPattern
+            ? DateFormat.getDateInstance({
+                strictParsing: true,
+                pattern: this._valueFormat,
+                calendarType: this._primaryCalendarType,
+            })
+            : DateFormat.getDateInstance({
+                strictParsing: true,
+                style: this._valueFormat,
+                calendarType: this._primaryCalendarType,
+            });
+    }
     getISOFormat() {
         if (!this._isoFormatInstance) {
             this._isoFormatInstance = DateFormat.getDateInstance({
@@ -147,6 +220,12 @@ __decorate([
 __decorate([
     property()
 ], DateComponentBase.prototype, "formatPattern", void 0);
+__decorate([
+    property()
+], DateComponentBase.prototype, "displayFormat", void 0);
+__decorate([
+    property()
+], DateComponentBase.prototype, "valueFormat", void 0);
 __decorate([
     property()
 ], DateComponentBase.prototype, "minDate", void 0);

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 jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.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 type 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\";\nimport type CalendarWeekNumbering from \"./types/CalendarWeekNumbering.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\tcldr: true,\n\trenderer: jsxRenderer,\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()\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()\n\tsecondaryCalendarType?: `${CalendarType}`;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t * @default undefined\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 = \"\";\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 = \"\";\n\n\t/**\n\t * Defines how to calculate calendar weeks and first day of the week.\n\t * If not set, the calendar will be displayed according to the currently set global configuration.\n\t * @default \"Default\"\n\t * @since 2.2.0\n\t * @public\n\t */\n\t@property()\n\tcalendarWeekNumbering: `${CalendarWeekNumbering}` = \"Default\";\n\n\t@i18n(\"@ui5/webcomponents\")\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\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 jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.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 type 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\";\nimport type CalendarWeekNumbering from \"./types/CalendarWeekNumbering.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\tcldr: true,\n\trenderer: jsxRenderer,\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()\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()\n\tsecondaryCalendarType?: `${CalendarType}`;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t * @default undefined\n\t * @deprecated\n\t * @public\n\t */\n\t@property()\n\tformatPattern?: string;\n\n\t/**\n\t * Determines the format, displayed in the input field.\n\t * @default undefined\n\t * @since 2.14.0\n\t * @public\n\t */\n\t@property()\n\tdisplayFormat?: string;\n\n\t/**\n\t * Determines the format, used for the value attribute.\n\t * @default undefined\n\t * @since 2.14.0\n\t * @public\n\t */\n\t@property()\n\tvalueFormat?: 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 = \"\";\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 = \"\";\n\n\t/**\n\t * Defines how to calculate calendar weeks and first day of the week.\n\t * If not set, the calendar will be displayed according to the currently set global configuration.\n\t * @default \"Default\"\n\t * @since 2.2.0\n\t * @public\n\t */\n\t@property()\n\tcalendarWeekNumbering: `${CalendarWeekNumbering}` = \"Default\";\n\n\t@i18n(\"@ui5/webcomponents\")\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 _isValueFormatPattern() {\n\t\treturn this._valueFormat !== \"medium\" && this._valueFormat !== \"short\" && this._valueFormat !== \"long\";\n\t}\n\n\tget _isDisplayFormatPattern() {\n\t\treturn this._displayFormat !== \"medium\" && this._displayFormat !== \"short\" && this._displayFormat !== \"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.getValueFormat().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_getCalendarDateFromStringDisplayValue(value: string) {\n\t\tconst jsDate = this.getDisplayFormat().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\tif (!timestamp) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst localDate = UI5Date.getInstance(timestamp);\n\t\treturn this.getFormat().format(localDate, true);\n\t}\n\n\t_getDisplayStringFromTimestamp(timestamp: number) {\n\t\tif (!timestamp) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst localDate = UI5Date.getInstance(timestamp);\n\t\treturn this.getDisplayFormat().format(localDate, true);\n\t}\n\n\t_getValueStringFromTimestamp(timestamp: number) {\n\t\tif (!timestamp) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst localDate = UI5Date.getInstance(timestamp);\n\t\treturn this.getValueFormat().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\tget _displayFormat() {\n\t\tif (this.displayFormat) {\n\t\t\treturn this.displayFormat;\n\t\t}\n\n\t\treturn this._formatPattern;\n\t}\n\n\tget _valueFormat() {\n\t\tif (this.valueFormat) {\n\t\t\treturn this.valueFormat;\n\t\t}\n\n\t\tif (this._formatPattern) {\n\t\t\treturn this._formatPattern;\n\t\t}\n\n\t\treturn \"\";\n\t}\n\n\tgetDisplayFormat() {\n\t\treturn this._isDisplayFormatPattern\n\t\t\t? DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._displayFormat,\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._displayFormat,\n\t\t\t\tcalendarType: this._primaryCalendarType,\n\t\t\t});\n\t}\n\n\tgetValueFormat() {\n\t\tif (!this._valueFormat) {\n\t\t\treturn this.getISOFormat();\n\t\t}\n\n\t\treturn this._isValueFormatPattern\n\t\t\t? DateFormat.getDateInstance({\n\t\t\t\tstrictParsing: true,\n\t\t\t\tpattern: this._valueFormat,\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._valueFormat,\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\nexport default DateComponentBase;\n"]}

package/dist/DatePicker.d.ts

@@ -255,6 +255,8 @@ declare class DatePicker extends DateComponentBase implements IFormInputElement
     _modifyDateValue(amount: number, unit: string, preserveDate?: boolean): void;
     _updateValueAndFireEvents(value: string, normalizeValue: boolean, events: Array<"change" | "value-changed" | "input">, updateValue?: boolean): void;
     _updateValueState(): void;
+    getValueFromDisplayValue(value: string): string;
+    getDisplayValueFromValue(value: string): string;
     /**
      * The ui5-input "submit" event handler - fire change event when the user presses enter
      * @protected
@@ -276,6 +278,12 @@ declare class DatePicker extends DateComponentBase implements IFormInputElement
      * @param value
      */
     _checkValueValidity(value: string): boolean;
+    /**
+     * Checks if the provided value is valid and within valid range.
+     * @protected
+     * @param value
+     */
+    _checkDisplayValueValidity(value: string): boolean;
     _click(e: MouseEvent): void;
     /**
      * Checks if a value is valid against the current date format of the DatePicker.
@@ -283,18 +291,40 @@ declare class DatePicker extends DateComponentBase implements IFormInputElement
      * @param value A value to be tested against the current date format
      */
     isValid(value: string): boolean;
+    /**
+     * 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
+     */
+    isValidValue(value: string): boolean;
+    /**
+     * 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
+     */
+    isValidDisplayValue(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;
+    isInValidRangeDisplayValue(value: string): boolean;
     /**
      * The parser understands many formats, but we need one format
      * @protected
      */
     normalizeValue(value: string): string;
-    get _displayFormat(): string;
+    /**
+     * The parser understands many formats, but we need one format
+     * @protected
+     */
+    normalizeFormattedValue(value: string): string;
+    /**
+     * The parser understands many formats, but we need one format
+     * @protected
+     */
+    normalizeDisplayValue(value: string): string;
     get _lastDayOfTheYear(): string;
     /**
      * @protected
@@ -303,6 +333,7 @@ declare class DatePicker extends DateComponentBase implements IFormInputElement
     get _headerTitleText(): string;
     get showHeader(): boolean;
     get showFooter(): boolean;
+    get displayValue(): string;
     get accInfo(): InputAccInfo;
     get valueStateDefaultText(): string | undefined;
     get valueStateTextMappings(): ValueStateAnnouncement;

package/dist/DatePicker.js

@@ -210,7 +210,7 @@ let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
                 console.warn(`Invalid value for property "${prop}": ${propValue} is not compatible with the configured format pattern: "${this._displayFormat}"`); // eslint-disable-line
             }
         });
-        this.value = this.normalizeValue(this.value) || this.value;
+        this.value = this.normalizeFormattedValue(this.value) || this.value;
         this.liveValue = this.value;
     }
     /**
@@ -310,14 +310,15 @@ let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
     _updateValueAndFireEvents(value, normalizeValue, events, updateValue = true) {
         const valid = this._checkValueValidity(value);
         if (valid && normalizeValue) {
-            value = this.normalizeValue(value); // transform valid values (in any format) to the correct format
+            value = this.getDisplayValueFromValue(value);
+            value = this.normalizeDisplayValue(value); // transform valid values (in any format) to the correct format
         }
         let executeEvent = true;
         this.liveValue = value;
         const previousValue = this.value;
         if (updateValue) {
             this._dateTimeInput.value = value;
-            this.value = value;
+            this.value = this.getValueFromDisplayValue(value);
             this._updateValueState(); // Change the value state to Error/None, but only if needed
         }
         events.forEach(e => {
@@ -342,6 +343,18 @@ let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
             this.valueState = previousValueState;
         }
     }
+    getValueFromDisplayValue(value) {
+        if (!this.getDisplayFormat().parse(value)) {
+            return value;
+        }
+        return this.getValueFormat().format(this.getDisplayFormat().parse(value));
+    }
+    getDisplayValueFromValue(value) {
+        if (!this.getValueFormat().parse(value)) {
+            return value;
+        }
+        return this.getDisplayFormat().format(this.getValueFormat().parse(value));
+    }
     /**
      * The ui5-input "submit" event handler - fire change event when the user presses enter
      * @protected
@@ -370,7 +383,18 @@ let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
         if (value === "") {
             return true;
         }
-        return this.isValid(value) && this.isInValidRange(value);
+        return this.isValidValue(value) && this.isInValidRange(value);
+    }
+    /**
+     * Checks if the provided value is valid and within valid range.
+     * @protected
+     * @param value
+     */
+    _checkDisplayValueValidity(value) {
+        if (value === "") {
+            return true;
+        }
+        return this.isValidDisplayValue(value) && this.isInValidRangeDisplayValue(value);
     }
     _click(e) {
         if (isPhone()) {
@@ -390,6 +414,28 @@ let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
         }
         return !!this.getFormat().parse(value);
     }
+    /**
+     * 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
+     */
+    isValidValue(value) {
+        if (value === "" || value === undefined) {
+            return true;
+        }
+        return !!this.getValueFormat().parse(value);
+    }
+    /**
+     * 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
+     */
+    isValidDisplayValue(value) {
+        if (value === "" || value === undefined) {
+            return true;
+        }
+        return !!this.getDisplayFormat().parse(value);
+    }
     /**
      * Checks if a date is between the minimum and maximum date.
      * @public
@@ -405,6 +451,16 @@ let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
         }
         return calendarDate.valueOf() >= this._minDate.valueOf() && calendarDate.valueOf() <= this._maxDate.valueOf();
     }
+    isInValidRangeDisplayValue(value) {
+        if (value === "" || value === undefined) {
+            return true;
+        }
+        const calendarDate = this._getCalendarDateFromStringDisplayValue(value);
+        if (!calendarDate || !this._minDate || !this._maxDate) {
+            return false;
+        }
+        return calendarDate.valueOf() >= this._minDate.valueOf() && calendarDate.valueOf() <= this._maxDate.valueOf();
+    }
     /**
      * The parser understands many formats, but we need one format
      * @protected
@@ -415,9 +471,28 @@ let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
         }
         return this.getFormat().format(this.getFormat().parse(value, true), true); // it is important to both parse and format the date as UTC
     }
-    get _displayFormat() {
-        // @ts-ignore oFormatOptions is a private API of DateFormat
-        return this.getFormat().oFormatOptions.pattern;
+    /**
+     * The parser understands many formats, but we need one format
+     * @protected
+     */
+    normalizeFormattedValue(value) {
+        if (!this.getValueFormat().parse(value, true)) {
+            return "";
+        }
+        if (value === "") {
+            return value;
+        }
+        return this.getValueFormat().format(this.getValueFormat().parse(value, true), true); // it is important to both parse and format the date as UTC
+    }
+    /**
+     * The parser understands many formats, but we need one format
+     * @protected
+     */
+    normalizeDisplayValue(value) {
+        if (value === "" || !this.getDisplayFormat().parse(value, true)) {
+            return value;
+        }
+        return this.getDisplayFormat().format(this.getDisplayFormat().parse(value, true), true); // it is important to both parse and format the date as UTC
     }
     get _lastDayOfTheYear() {
         const currentYear = UI5Date.getInstance().getFullYear();
@@ -443,6 +518,15 @@ let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
     get showFooter() {
         return isPhone();
     }
+    get displayValue() {
+        if (!this.getValueFormat().parse(this.value, true)) {
+            return this.value;
+        }
+        if (!this.value) {
+            return "";
+        }
+        return this.getDisplayFormat().format(this.getValueFormat().parse(this.value, true), true);
+    }
     get accInfo() {
         return {
             "ariaRoledescription": this.dateAriaDescription,
@@ -561,7 +645,7 @@ let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
      * @returns The date as string
      */
     formatValue(date) {
-        return this.getFormat().format(date);
+        return this.getValueFormat().format(date);
     }
     _togglePicker() {
         this.open = !this.open;
@@ -576,10 +660,10 @@ let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
      * @default null
      */
     get dateValue() {
-        return this.liveValue ? this.getFormat().parse(this.liveValue) : this.getFormat().parse(this.value);
+        return this.liveValue ? this.getValueFormat().parse(this.liveValue) : this.getValueFormat().parse(this.value);
     }
     get dateValueUTC() {
-        return this.liveValue ? this.getFormat().parse(this.liveValue, true) : this.getFormat().parse(this.value);
+        return this.liveValue ? this.getValueFormat().parse(this.liveValue, true) : this.getValueFormat().parse(this.value);
     }
     get styles() {
         return {