@openui5/sap.m 1.113.0 → 1.114.1

package/src/sap/m/DatePicker.js

@@ -33,7 +33,7 @@ sap.ui.define([
 	"sap/ui/unified/library",
 	"sap/ui/core/Configuration",
 	"sap/ui/unified/calendar/CalendarUtils",
-    'sap/ui/core/date/UI5Date',
+	"sap/ui/core/date/UI5Date",
 	"sap/ui/core/date/CalendarWeekNumbering",
 	"sap/ui/dom/jquery/cursorPos"
 ],
@@ -64,7 +64,7 @@ sap.ui.define([
 		unifiedLibrary,
 		Configuration,
 		CalendarUtils,
-        UI5Date,
+		UI5Date,
 		CalendarWeekNumbering
 	) {
 	"use strict";
@@ -104,21 +104,51 @@ sap.ui.define([
 	 *
 	 * 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>
+	 * <li>Typing it directly in the input field</li></ul>
 	 *
 	 * On app level, there are two options to provide a date for the
 	 * <code>DatePicker</code> - as a string to the <code>value</code> property or as
-	 * a JavaScript Date object to the <code>dateValue</code> property (only one of
+	 * a UI5Date or JavaScript Date object to the <code>dateValue</code> property (only one of
 	 * these properties should be used at a time):
 	 *
 	 * <ul><li>Use the <code>value</code> property if you want to bind the
 	 * <code>DatePicker</code> to a model using the <code>sap.ui.model.type.Date</code></li>
+	 * @example <caption> binding the <code>value</code> property by using types </caption>
+	 * new sap.ui.model.json.JSONModel({
+	 *     date: sap.ui.core.date.UI5Date.getInstance(2022,10,10,10,10,10)
+	 * });
+	 *
+	 * new sap.m.DatePicker({
+	 *     value:{path:"/date",type:"sap.ui.model.type.Date"}
+	 * });
+	 *
 	 * <li>Use the <code>value</code> property if the date is provided as a string from
 	 * the backend or inside the app (for example, as ABAP type DATS field)</li>
+	 * @example <caption> binding the <code>value</code> property by using types </caption>
+	 * new sap.ui.model.json.JSONModel({date:'2022-11-10');
+	 *
+	 * new sap.m.DatePicker({
+	 *     value:{
+	 *         path:"/date",
+	 *         type:"sap.ui.model.type.Date",
+	 *         formatOptions:{
+	 *             source:{
+	 *                 pattern:"yyyy-MM-dd"
+	 *             }
+	 *         }
+	 *     }
+	 * });
+	 *
+	 * <b>Note:</b> There are multiple binding type choices, such as:
+	 * sap.ui.model.type.Date
+	 * sap.ui.model.odata.type.DateTime
+	 * sap.ui.model.odata.type.DateTimeOffset
+	 * See {@link sap.ui.model.type.Date}, {@link sap.ui.model.odata.type.DateTime} or {@link sap.ui.model.odata.type.DateTimeOffset}
+	 *
 	 * <li>Use the <code>dateValue</code> property if the date is already provided as a
-	 * JavaScript Date object or you want to work with a JavaScript Date object.
+	 * UI5Date or JavaScript Date object or you want to work with a UI5Date or JavaScript Date object.
 	 * Use <code>dateValue</code> as a helper property to easily obtain the day, month and year
-	 * of the chosen date. Although possible to bind it, the recommendation is not to do it.
+	 * of the chosen date. Although it's possible to bind it, it's not recommended to do so.
 	 * When binding is needed, use <code>value</code> property instead</li></ul>
 	 *
 	 * <h3>Formatting</h3>
@@ -154,7 +184,7 @@ sap.ui.define([
 	 * the close event), or select Cancel.
 	 *
 	 * @extends sap.m.DateTimeField
-	 * @version 1.113.0
+	 * @version 1.114.1
 	 *
 	 * @constructor
 	 * @public
@@ -185,7 +215,7 @@ sap.ui.define([
 				secondaryCalendarType : {type : "sap.ui.core.CalendarType", group : "Appearance"},
 
 				/**
-				 * Minimum date that can be shown and selected in the <code>DatePicker</code>. This must be a JavaScript date object.
+				 * Minimum date that can be shown and selected in the <code>DatePicker</code>. This must be a UI5Date or JavaScript Date object.
 				 *
 				 * <b>Note:</b> If the <code>minDate</code> is set to be after the <code>maxDate</code>,
 				 * the <code>maxDate</code> and the <code>minDate</code> are switched before rendering.
@@ -194,7 +224,7 @@ sap.ui.define([
 				minDate : {type : "object", group : "Misc", defaultValue : null},
 
 				/**
-				 * Maximum date that can be shown and selected in the <code>DatePicker</code>. This must be a JavaScript date object.
+				 * Maximum date that can be shown and selected in the <code>DatePicker</code>. This must be a UI5Date or JavaScript Date object.
 				 *
 				 * <b>Note:</b> If the <code>maxDate</code> is set to be before the <code>minDate</code>,
 				 * the <code>maxDate</code> and the <code>minDate</code> are switched before rendering.
@@ -349,11 +379,11 @@ sap.ui.define([
 	 */
 
 	/**
-	 * The date as JavaScript Date object. This is independent from any formatter.
+	 * The date instance. This is independent from any formatter.
 	 *
 	 * <b>Note:</b> If this property is used, the <code>value</code> property should not be changed from the caller.
 	 *
-	 * @returns {Date} the value of property <code>dateValue</code>
+	 * @returns {Date|module:sap/ui/core/date/UI5Date} the value of property <code>dateValue</code>
 	 * @public
 	 * @name sap.m.DatePicker#getDateValue
 	 * @function
@@ -687,16 +717,16 @@ sap.ui.define([
 	};
 
 	/**
-	 * Set minimum date that can be shown and selected in the <code>DatePicker</code>. This must be a JavaScript date object.
+	 * Set minimum date that can be shown and selected in the <code>DatePicker</code>. This must be a date instance.
 	 *
-	 * @param {Date} oDate A JavaScript Date
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oDate A date instance
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 */
 	DatePicker.prototype.setMinDate = function(oDate) {
 
 		if (!this._isValidDate(oDate)) {
-			throw new Error("Date must be a JavaScript date object; " + this);
+			throw new Error("Date must be a JavaScript or UI5Date date object; " + this);
 		}
 
 		if (deepEqual(this.getMinDate(), oDate)) {
@@ -735,16 +765,16 @@ sap.ui.define([
 	};
 
 	/**
-	 * Set maximum date that can be shown and selected in the <code>DatePicker</code>. This must be a JavaScript date object.
+	 * Set maximum date that can be shown and selected in the <code>DatePicker</code>. This must be a date instance.
 	 *
-	 * @param {Date} oDate A JavaScript Date
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oDate A date instance
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 */
 	DatePicker.prototype.setMaxDate = function(oDate) {
 
 		if (!this._isValidDate(oDate)) {
-			throw new Error("Date must be a JavaScript date object; " + this);
+			throw new Error("Date must be a JavaScript or UI5Date date object; " + this);
 		}
 
 		if (deepEqual(this.getMaxDate(), oDate)) {
@@ -1255,7 +1285,7 @@ sap.ui.define([
 	DatePicker.prototype._getVisibleDatesRange = function (oCalendar) {
 		var aVisibleDays = oCalendar._getVisibleDays();
 
-		// Convert to local JavaScript Date
+		// Convert to local date instance
 		return new DateRange({
 			startDate: aVisibleDays[0].toLocalJSDate(), // First visible date
 			endDate: aVisibleDays[aVisibleDays.length - 1].toLocalJSDate() // Last visible date

package/src/sap/m/DateRangeSelection.js

@@ -88,19 +88,51 @@ sap.ui.define([
 	 *
 	 * 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>
+	 * <li>Typing it directly in the input field</li></ul>
 	 *
 	 * On app level, there are two options to provide a date for the
 	 * <code>DateRangeSelection</code> - date range as a string to the
-	 * <code>value</code> property or JavaScript Date objects to the
+	 * <code>value</code> property or UI5Date/JavaScript Date objects to the
 	 * <code>dateValue</code> and <code>secondDateValue</code> properties (only one of
 	 * these options should be used at a time):
 	 *
 	 * <ul><li>Use the <code>value</code> property if the date range is already provided as
 	 * a formatted string</li>
+	 * @example <caption> binding the <code>value</code> property by using types </caption>
+	 * new sap.ui.model.json.JSONModel({start:'2022-11-10', end:'2022-11-15'});
+	 *
+	 * new sap.m.DateRangeSelection({
+	 *     value: {
+	 *         type: "sap.ui.model.type.DateInterval",
+	 *         parts: [{
+	 *             type: "sap.ui.model.type.Date",
+	 *             path: "/start",
+	 *             formatOptions: {
+	 *                 source: {
+	 *                     pattern: "yyyy-MM-dd"
+	 *                 }
+	 *             }
+	 *         },
+	 *         {
+	 *             type: "sap.ui.model.type.Date",
+	 *             path:"/end",
+	 *             formatOptions: {
+	 *             source: {
+	 *                 pattern: "yyyy-MM-dd"
+	 *             }
+	 *         }}]
+	 *     }
+	 * });
+	 *
+	 * <b>Note:</b> There are multiple binding type choices, such as:
+	 * sap.ui.model.type.Date
+	 * sap.ui.model.odata.type.DateTime
+	 * sap.ui.model.odata.type.DateTimeOffset
+	 * See {@link sap.ui.model.type.Date}, {@link sap.ui.model.odata.type.DateTime} or {@link sap.ui.model.odata.type.DateTimeOffset}
+	 *
 	 * <li>Use the <code>dateValue</code> and <code>secondDateValue</code> properties
-	 * if the date range is already provided as JavaScript Date objects or you want to
-	 * work with JavaScript Date objects</li></ul>
+	 * if the date range is already provided as UI5Date or JavaScript Date objects or you want to
+	 * work with UI5Date or JavaScript Date objects</li></ul>
 	 *
 	 * <h3>Formatting</h3>
 	 *
@@ -131,8 +163,8 @@ sap.ui.define([
 	 * compact mode and provides a touch-friendly size in cozy mode.
 	 *
 	 * @extends sap.m.DatePicker
-	 * @version 1.113.0
-	 * @version 1.113.0
+	 * @version 1.114.1
+	 * @version 1.114.1
 	 *
 	 * @constructor
 	 * @public
@@ -152,7 +184,7 @@ sap.ui.define([
 				delimiter : {type : "string", group : "Misc", defaultValue : '-'},
 
 				/**
-				 * The end date of the range as JavaScript Date object. This is independent from any formatter.
+				 * The end date of the range as UI5Date or JavaScript Date object. This is independent from any formatter.
 				 *
 				 * <b>Note:</b> If this property is used, the <code>value</code> property should not be changed from the caller.
 				 */
@@ -237,7 +269,8 @@ sap.ui.define([
 			oBinding,
 			oBindingType,
 			oLocale,
-			oLocaleData;
+			oLocaleData,
+			oFormatOptions;
 
 		if (!sPlaceholder) {
 			oBinding = this.getBinding("value");
@@ -250,7 +283,8 @@ sap.ui.define([
 				if (oBindingType.oFormatOptions && oBindingType.oFormatOptions.format) {
 					sPlaceholder = oLocaleData.getCustomDateTimePattern(oBindingType.oFormatOptions.format);
 				} else {
-					sPlaceholder = oLocaleData.getDatePattern("medium");
+					oFormatOptions = Object.assign({ interval: true, singleIntervalValue: true }, oBindingType.oFormatOptions);
+					return this._getDateFormatPlaceholderText(oFormatOptions);
 				}
 			} else {
 				sPlaceholder = this.getDisplayFormat();
@@ -260,7 +294,8 @@ sap.ui.define([
 				}
 
 				if (this._checkStyle(sPlaceholder)) {
-					sPlaceholder = oLocaleData.getDatePattern(sPlaceholder);
+					oFormatOptions = Object.assign({ interval: true, singleIntervalValue: true, intervalDelimiter: _getDelimiter.call(this) }, _getFormatter.call(this).oFormatOptions);
+					return  this._getDateFormatPlaceholderText(oFormatOptions);
 				}
 			}
 
@@ -273,6 +308,10 @@ sap.ui.define([
 		return sPlaceholder;
 	};
 
+	DateRangeSelection.prototype._getDateFormatPlaceholderText = function (oFormatOptions) {
+		return  DateFormat.getDateInstance(oFormatOptions).getPlaceholderText();
+	};
+
 	// Overwrite DatePicker's setValue to support two date range processing
 	/**
 	 * Getter for property <code>value</code>.
@@ -360,9 +399,9 @@ sap.ui.define([
 	};
 
 	/**
-	 * Converts the parameter to a Javascript Date, if it is a timestamp integer.
-	 * @param {Date|int} vBindingDate A timestamp or a Javascript Date
-	 * @returns {Date} A Javascript Date object
+	 * Converts the parameter to a UI5Date or JavaScript Date, if it is a timestamp integer.
+	 * @param {Date|module:sap/ui/core/date/UI5Date|int} vBindingDate A timestamp or a date instance
+	 * @returns {Date|module:sap/ui/core/date/UI5Date} A date instance
 	 * @private
 	 */
 	function _normalizeDateValue(vBindingDate) {
@@ -370,8 +409,8 @@ sap.ui.define([
 	}
 
 	/**
-	 * Converts the parameter to a timestamp integer, if it is a Javascript Date.
-	 * @param {Date|int} vBindingDate A timestamp or a Javascript Date
+	 * Converts the parameter to a timestamp integer, if it is a UI5Date or JavaScript Date.
+	 * @param {Date|module:sap/ui/core/date/UI5Date|int} vBindingDate A timestamp or a date instance
 	 * @returns {int} A timestamp integer
 	 * @private
 	 */
@@ -443,7 +482,7 @@ sap.ui.define([
 
 	/**
 	 * Set the start date of the range.
-	 * @param {Date} oFrom A JavaScript Date
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oFrom A date instance
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 * @deprecated since version 1.22.0, replaced by <code>dateValue</code> property of the {@link sap.m.DateTimeField}
@@ -465,7 +504,7 @@ sap.ui.define([
 
 	/**
 	 * Set the end date of the range.
-	 * @param {Date} oTo A JavaScript Date
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oTo A date instance
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 * @deprecated since version 1.22.0, replaced by <code>secondDateValue</code> property
@@ -477,7 +516,7 @@ sap.ui.define([
 
 	/**
 	 * Get the end date of the range.
-	 * @returns {Date} the end date of the date range
+	 * @returns {Date|module:sap/ui/core/date/UI5Date} the end date of the date range
 	 * @public
 	 * @deprecated since version 1.22.0, replaced by <code>secondDateValue</code> property
 	 */
@@ -490,11 +529,11 @@ sap.ui.define([
 	/**
 	 * Getter for property <code>dateValue</code>.
 	 *
-	 * The start date of the range as JavaScript Date object. This is independent from any formatter.
+	 * The start date of the range as UI5Date or JavaScript Date object. This is independent from any formatter.
 	 *
 	 * <b>Note:</b> If this property is used, the <code>value</code> property should not be changed from the caller.
 	 *
-	 * @returns {Date} the value of property <code>dateValue</code>
+	 * @returns {Date|module:sap/ui/core/date/UI5Date} the value of property <code>dateValue</code>
 	 * @public
 	 * @name sap.m.DateRangeSelection#getDateValue
 	 * @function
@@ -503,18 +542,18 @@ sap.ui.define([
 	/**
 	 * Setter for property <code>dateValue</code>.
 	 *
-	 * The start date of the range as JavaScript Date object. This is independent from any formatter.
+	 * The start date of the range as UI5Date or JavaScript Date object. This is independent from any formatter.
 	 *
 	 * <b>Note:</b> If this property is used, the <code>value</code> property should not be changed from the caller.
 	 *
-	 * @param {Date} oDateValue New value for property <code>dateValue</code>
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oDateValue New value for property <code>dateValue</code>
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 */
 	DateRangeSelection.prototype.setDateValue = function(oDateValue) {
 
 		if (!this._isValidDate(oDateValue)) {
-			throw new Error("Date must be a JavaScript date object; " + this);
+			throw new Error("Date must be a JavaScript or UI5Date date object; " + this);
 		}
 
 		if (deepEqual(this.getDateValue(), oDateValue)) {
@@ -531,11 +570,11 @@ sap.ui.define([
 	/**
 	 * Getter for property <code>secondDateValue</code>.
 	 *
-	 * The end date of the range as JavaScript Date object. This is independent from any formatter.
+	 * The end date of the range as UI5Date or JavaScript Date object. This is independent from any formatter.
 	 *
 	 * <b>Note:</b> If this property is used, the <code>value</code> property should not be changed from the caller.
 	 *
-	 * @returns {Date} the value of property <code>secondDateValue</code>
+	 * @returns {Date|module:sap/ui/core/date/UI5Date} the value of property <code>secondDateValue</code>
 	 * @public
 	 * @name sap.m.DateRangeSelection#getSecondDateValue
 	 * @function
@@ -544,18 +583,18 @@ sap.ui.define([
 	/**
 	 * Setter for property <code>secondDateValue</code>.
 	 *
-	 * The start date of the range as JavaScript Date object. This is independent from any formatter.
+	 * The start date of the range as UI5Date or JavaScript Date object. This is independent from any formatter.
 	 *
 	 * <b>Note:</b> If this property is used, the <code>value</code> property should not be changed from the caller.
 	 *
-	 * @param {Date} oSecondDateValue New value for property <code>dateValue</code>
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oSecondDateValue New value for property <code>dateValue</code>
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 */
 	DateRangeSelection.prototype.setSecondDateValue = function(oSecondDateValue) {
 
 		if (!this._isValidDate(oSecondDateValue)) {
-			throw new Error("Date must be a JavaScript date object; " + this);
+			throw new Error("Date must be a JavaScript or UI5Date date object; " + this);
 		}
 
 		if (deepEqual(this.getSecondDateValue(), oSecondDateValue)) {
@@ -576,8 +615,8 @@ sap.ui.define([
 	};
 
 	/**
-	 * Set minimum date that can be shown and selected in the <code>DatePicker</code>. This must be a JavaScript date object.
-	 * @param {Date} oDate A JavaScript Date
+	 * Set minimum date that can be shown and selected in the <code>DatePicker</code>. This must be a UI5Date or JavaScript Date object.
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oDate A date instance
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 */
@@ -597,8 +636,8 @@ sap.ui.define([
 	};
 
 	/**
-	 * Set maximum date that can be shown and selected in the <code>DatePicker</code>. This must be a JavaScript date object.
-	 * @param {Date} oDate A JavaScript Date
+	 * Set maximum date that can be shown and selected in the <code>DatePicker</code>. This must be a UI5Date or JavaScript Date object.
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oDate A date instance
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 */

package/src/sap/m/DateTimeField.js

@@ -65,7 +65,7 @@ sap.ui.define([
 	 * @extends sap.m.InputBase
 	 *
 	 * @author SAP SE
-	 * @version 1.113.0
+	 * @version 1.114.1
 	 *
 	 * @constructor
 	 * @public
@@ -88,7 +88,7 @@ sap.ui.define([
 				valueFormat: {type: "string", group: "Data", defaultValue: null},
 
 				/**
-				 * Holds a reference to a JavaScript Date Object. The <code>value</code> (string)
+				 * Holds a reference to a UI5Date or JavaScript Date object. The <code>value</code> (string)
 				 * property will be set according to it. Alternatively, if the <code>value</code>
 				 * and <code>valueFormat</code> pair properties are supplied instead,
 				 * the <code>dateValue</code> will be instantiated according to the parsed
@@ -100,7 +100,7 @@ sap.ui.define([
 				dateValue: {type: "object", group: "Data", defaultValue: null},
 
 				/**
-				 * Holds a reference to a JavaScript Date Object to define the initially focused
+				 * Holds a reference to a UI5Date or JavaScript Date object to define the initially focused
 				 * date/time when the picker popup is opened.
 				 *
 				 * <b>Notes:</b>
@@ -108,7 +108,7 @@ sap.ui.define([
 				 * <li>Setting this property does not change the <code>value</code> property.</li>
 				 * <li>Depending on the context this property is used in ({@link sap.m.TimePicker},
 				 * {@link sap.m.DatePicker} or {@link sap.m.DateTimePicker}), it takes into account only the time part, only
-				 * the date part or both parts of the JavaScript Date Object.</li>
+				 * the date part or both parts of the UI5Date or JavaScript Date object.</li>
 				 * </ul>
 				 * @since 1.54
 				 */
@@ -228,16 +228,16 @@ sap.ui.define([
 	/**
 	 * Setter for property <code>dateValue</code>.
 	 *
-	 * The date and time in DateTimeField as JavaScript Date object.
+	 * The date and time in DateTimeField as UI5Date or JavaScript Date object.
 	 *
-	 * @param {Date} oDate A JavaScript Date
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oDate A date instance
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 */
 	DateTimeField.prototype.setDateValue = function (oDate) {
 
 		if (!this._isValidDate(oDate)) {
-			throw new Error("Date must be a JavaScript date object; " + this);
+			throw new Error("Date must be a JavaScript or UI5Date date object; " + this);
 		}
 
 		if (deepEqual(this.getDateValue(), oDate)) {
@@ -378,18 +378,23 @@ sap.ui.define([
 
 	DateTimeField.prototype._getPlaceholder = function() {
 
-		var sPlaceholder = this.getPlaceholder();
+		var sPlaceholder = this.getPlaceholder(),
+			oBinding = this.getBinding("value"),
+			oBindingType = oBinding && oBinding.getType && oBinding.getType(),
+			bDisplayFormat;
 
 		if (!sPlaceholder) {
-			sPlaceholder = this._getDisplayFormatPattern();
-
-			if (!sPlaceholder) {
-				sPlaceholder = this._getDefaultDisplayStyle();
+			if (oBindingType instanceof SimpleDateType) {
+				return oBindingType.getPlaceholderText();
 			}
 
-			if (this._checkStyle(sPlaceholder)) {
-				sPlaceholder = this._getLocaleBasedPattern(sPlaceholder);
+			if (oBindingType instanceof ODataType && oBindingType.oFormat) {
+				return oBindingType.oFormat.getPlaceholderText();
 			}
+
+			bDisplayFormat = !!this._getDisplayFormatPattern();
+
+			sPlaceholder = this._getFormatter(bDisplayFormat).getPlaceholderText();
 		}
 
 		return sPlaceholder;

package/src/sap/m/DateTimeInput.js

@@ -19,7 +19,8 @@ sap.ui.define([
 	'sap/ui/core/library',
 	'sap/ui/Device',
 	"./DateTimeInputRenderer",
-	"sap/ui/core/Configuration"
+	"sap/ui/core/Configuration",
+	"sap/ui/core/date/UI5Date"
 ],
 function(
 	jQuery,
@@ -35,7 +36,8 @@ function(
 	coreLibrary,
 	Device,
 	DateTimeInputRenderer,
-	Configuration
+	Configuration,
+	UI5Date
 ) {
 	"use strict";
 
@@ -64,7 +66,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.113.0
+	 * @version 1.114.1
 	 *
 	 * @constructor
 	 * @public
@@ -361,7 +363,7 @@ function(
 
 		sValue = this.validateProperty("value", sValue);
 		if (sValue.toLowerCase() == "now") {
-			return this.setDateValue(new Date());
+			return this.setDateValue(UI5Date.getInstance());
 		}
 
 		if (sValue === this.getValue()) {

package/src/sap/m/DateTimePicker.js

@@ -99,19 +99,50 @@ sap.ui.define([
 	 *
 	 * On app level, there are two options to provide a date for the
 	 * <code>DateTimePicker</code> - as a string to the <code>value</code> property
-	 * or as a JavaScript Date object to the <code>dateValue</code> property (only one
+	 * or as a UI5Date or JavaScript Date object to the <code>dateValue</code> property (only one
 	 * of these properties should be used at a time):
 	 *
 	 * <ul><li>Use the <code>value</code> property if you want to bind the
 	 * <code>DateTimePicker</code> to a model using the
 	 * <code>sap.ui.model.type.DateTime</code></li>
+	 * @example <caption> binding the <code>value</code> property by using types </caption>
+	 * new sap.ui.model.json.JSONModel({date: sap.ui.core.date.UI5Date.getInstance(2022,10,10,12,10,10)});
+	 *
+	 * new sap.m.DateTimePicker({
+	 *     value: {
+	 *         type: "sap.ui.model.type.DateTime",
+	 *         path: "/date"
+	 *     }
+	 * });
+	 *
 	 * <li>Use the <code>value</code> property if the date is provided as a string from
 	 * the backend or inside the app (for example, as ABAP type DATS field)</li>
+	 * @example <caption> binding the <code>value</code> property by using types </caption>
+	 * new sap.ui.model.json.JSONModel({date:"2022-11-10-12-10-10"});
+	 *
+	 * new sap.m.DateTimePicker({
+	 *     value: {
+	 *         type: "sap.ui.model.type.DateTime",
+	 *         path: "/date",
+	 *         formatOptions: {
+	 *             source: {
+	 *                 pattern: "yyyy-MM-dd-HH-mm-ss"
+	 *             }
+	 *          }
+	 *     }
+	 * });
+	 *
+	 * <b>Note:</b> There are multiple binding type choices, such as:
+	 * sap.ui.model.type.Date
+	 * sap.ui.model.odata.type.DateTime
+	 * sap.ui.model.odata.type.DateTimeOffset
+	 * sap.ui.model.odata.type.DateTimeWithTimezone
+	 * See {@link sap.ui.model.type.Date}, {@link sap.ui.model.odata.type.DateTime}, {@link sap.ui.model.odata.type.DateTimeOffset} or {@link sap.ui.model.odata.type.DateTimeWithTimezone}
+	 *
 	 * <li>Use the <code>dateValue</code> property if the date is already provided as a
-	 * JavaScript Date object or you want to work with a JavaScript Date object.
+	 * UI5Date or JavaScript Date object or you want to work with a UI5Date or JavaScript Date object.
 	 * Use <code>dateValue</code> as a helper property to easily obtain the day, month, year,
-	 * hours, minutes and seconds of the chosen date and time. Although possible to bind it,
-	 * the recommendation is not to do it.
+	 * hours, minutes and seconds of the chosen date and time. Although it's possible to bind it, it's not recommended to do so.
 	 * When binding is needed, use <code>value</code> property instead</li></ul>
 	 *
 	 * <h3>Formatting</h3>
@@ -145,7 +176,7 @@ sap.ui.define([
 	 * mobile devices, it opens in full screen.
 	 *
 	 * @extends sap.m.DatePicker
-	 * @version 1.113.0
+	 * @version 1.114.1
 	 *
 	 * @constructor
 	 * @public
@@ -332,7 +363,7 @@ sap.ui.define([
 				});
 				oSwitcher.attachSelect(this._handleSelect, this);
 
-				this.setAggregation("_switcher", oSwitcher, true);
+				this.setAggregation("_switcher", oSwitcher);
 			}
 
 			if (Device.system.phone || jQuery('html').hasClass("sapUiMedia-Std-Phone") || this.getForcePhoneView()) {
@@ -579,9 +610,9 @@ sap.ui.define([
 	};
 
 	/**
-	 * Set minimum date that can be shown and selected in the <code>DateTimePicker</code>. This must be a JavaScript date object.
+	 * Set minimum date that can be shown and selected in the <code>DateTimePicker</code>. This must be a UI5Date or JavaScript Date object.
 	 *
-	 * @param {Date} oDate A JavaScript Date
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oDate A date instance
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 */
@@ -595,9 +626,9 @@ sap.ui.define([
 	};
 
 	/**
-	 * Set maximum date that can be shown and selected in the <code>DateTimePicker</code>. This must be a JavaScript date object.
+	 * Set maximum date that can be shown and selected in the <code>DateTimePicker</code>. This must be a UI5Date or JavaScript Date object.
 	 *
-	 * @param {Date} oDate A JavaScript Date
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oDate A date instance
 	 * @returns {this} Reference to <code>this</code> for method chaining
 	 * @public
 	 */
@@ -1100,7 +1131,7 @@ sap.ui.define([
 	 * @name sap.m.DateTimePicker#getDateValue
 	 * @function
 	 * @public
-	 * @returns {Date} A JavaScript Date
+	 * @returns {Date|module:sap/ui/core/date/UI5Date} date instance
 	 * @since 1.102
 	 */
 

package/src/sap/m/Dialog.js

@@ -167,7 +167,7 @@ function(
 		*
 		* @implements sap.ui.core.PopupInterface
 		* @author SAP SE
-		* @version 1.113.0
+		* @version 1.114.1
 		*
 		* @constructor
 		* @public
@@ -640,7 +640,7 @@ function(
 
 			// title alignment
 			if (oHeader && oHeader.setTitleAlignment) {
-				oHeader.setProperty("titleAlignment", this.getTitleAlignment(), true);
+				oHeader.setTitleAlignment(this.getTitleAlignment());
 			}
 
 			if (oHeader && this._getTitles(oHeader).length === 0) {