@openui5/sap.m 1.99.1 → 1.102.0

package/src/sap/m/DateTimePicker.js

@@ -16,9 +16,9 @@ sap.ui.define([
 	'sap/ui/core/Control',
 	'sap/ui/Device',
 	'sap/ui/core/format/DateFormat',
-	'sap/ui/core/format/DateFormatTimezoneDisplay',
 	'sap/ui/core/LocaleData',
 	'sap/ui/core/Core',
+	'sap/ui/core/format/TimezoneUtil',
 	'./TimePickerClocks',
 	'./DateTimePickerRenderer',
 	'./SegmentedButton',
@@ -39,9 +39,9 @@ sap.ui.define([
 	Control,
 	Device,
 	DateFormat,
-	DateFormatTimezoneDisplay,
 	LocaleData,
 	Core,
+	TimezoneUtil,
 	TimePickerClocks,
 	DateTimePickerRenderer,
 	SegmentedButton,
@@ -57,7 +57,7 @@ sap.ui.define([
 	// shortcut for sap.m.PlacementType and sap.m.ButtonType
 	var PlacementType = library.PlacementType,
 		ButtonType = library.ButtonType,
-		// From sap.ui.Device.media.RANGESETS.SAP_STANDARD - "Phone": For screens smaller than 600 pixels.
+		// From Device.media.RANGESETS.SAP_STANDARD - "Phone": For screens smaller than 600 pixels.
 		STANDART_PHONE_RANGESET = "Phone",
 		CalendarType = coreLibrary.CalendarType;
 
@@ -145,7 +145,7 @@ sap.ui.define([
 	 * mobile devices, it opens in full screen.
 	 *
 	 * @extends sap.m.DatePicker
-	 * @version 1.99.1
+	 * @version 1.102.0
 	 *
 	 * @constructor
 	 * @public
@@ -313,19 +313,14 @@ sap.ui.define([
 			if (Device.system.phone || jQuery('html').hasClass("sapUiMedia-Std-Phone") || this.getForcePhoneView()) {
 				oSwitcher.setVisible(true);
 				oSwitcher.setSelectedKey("Cal");
+				this.getCalendar().addDelegate({
+					onAfterRendering: function() {
+						this._switchVisibility(oSwitcher.getSelectedKey());
+					}.bind(this)
+				});
 			} else {
 				oSwitcher.setVisible(false);
 			}
-
-		},
-
-		onAfterRendering: function() {
-			if (Device.system.phone || jQuery('html').hasClass("sapUiMedia-Std-Phone") || this.getForcePhoneView()) {
-				var oSwitcher = this.getAggregation("_switcher");
-				var sKey = oSwitcher.getSelectedKey();
-				this._switchVisibility(sKey);
-			}
-
 		},
 
 		_handleSelect: function(oEvent) {
@@ -349,7 +344,7 @@ sap.ui.define([
 			}
 
 			if (sKey === "Cal") {
-				oCalendar.$().css("display", "");
+				oCalendar.$().css("display", "flex");
 				oClocks.$().css("display", "none");
 				oCalendar.getFocusDomRef() && oCalendar.getFocusDomRef().focus();
 			} else {
@@ -373,21 +368,6 @@ sap.ui.define([
 
 			return this._oDateTimePicker.getSpecialDates();
 
-		},
-
-		onkeydown: function(oEvent) {
-			var bIsTabForward = oEvent.keyCode === KeyCodes.TAB && !oEvent.shiftKey;
-			var bIsTabBackward = oEvent.keyCode === KeyCodes.TAB && oEvent.shiftKey;
-			if (bIsTabForward) {
-				if (oEvent.target.classList.contains('sapUiCalHeadToday')
-					|| (oEvent.target.classList.contains('sapUiCalHeadBLast') && !this._oDateTimePicker._oCalendar.getShowCurrentDateButton())) {
-					this.getAggregation('clocks').getDomRef().children[0].children[0].focus();
-				}
-			}
-			if (bIsTabBackward && oEvent.target.classList.contains('sapUiCalItem')) {
-				var iLastElementIndex = this.oParent.getAggregation("footer").getAggregation("content").length - 1;
-				this.oParent.getAggregation("footer").getAggregation("content")[iLastElementIndex].focus();
-			}
 		}
 	});
 
@@ -397,11 +377,40 @@ sap.ui.define([
 		this._bOnlyCalendar = false;
 	};
 
+	DateTimePicker.prototype.setValue = function(sValue) {
+		var sFallbackValue;
+
+		DatePicker.prototype.setValue.apply(this, arguments);
+
+		delete this._prefferedValue;
+
+		if (!this.getDateValue()) {
+			sFallbackValue = this._fallbackParse(sValue);
+
+			if (typeof sFallbackValue === "string") {
+				this._bValid = true;
+				this._prefferedValue = sFallbackValue;
+
+				// there is a re-render comming, but this updates the dom immediately to avoid flickering
+				if (this.getDomRef() && this._$input.val() !== sFallbackValue) {
+					this._$input.val(sFallbackValue);
+					this._curpos = this._$input.cursorPos();
+				}
+			}
+		}
+
+		return this;
+	};
+
 	DateTimePicker.prototype.setTimezone = function(sTimezone) {
 		var oCurrentDateValue,
 			sFormattedValue,
 			oNewDateValue;
 
+		if (this.getTimezone() === sTimezone) {
+			return this;
+		}
+
 		oCurrentDateValue = this.getDateValue() || this._parseValue(this.getValue(), false);
 		sFormattedValue = this._formatValue(oCurrentDateValue, false);
 
@@ -549,6 +558,7 @@ sap.ui.define([
 		var oResourceBundle;
 
 		if (this._oTimezonePopup) {
+			this._oTimezonePopup.setTitle(this._getTimezone(true));
 			return this._oTimezonePopup;
 		}
 
@@ -597,11 +607,11 @@ sap.ui.define([
 	};
 
 	/**
-	 * Gets the format options of the value or dateValue binding with timezone.
-	 * @returns {object} The binding format options or an empty object instance.
+	 * Gets the format options of the value or dateValue binding.
+	 * @returns {object} The binding format options or undefined.
 	 * @private
 	 */
-	DateTimePicker.prototype._getBindingWithTimezoneFormatOptions = function() {
+	DateTimePicker.prototype._getBindingFormatOptions = function() {
 		var oBinding = this.getBinding("value") || this.getBinding("dateValue"),
 			oBindingType;
 
@@ -609,7 +619,7 @@ sap.ui.define([
 			oBindingType = oBinding.getType();
 		}
 
-		if (oBindingType && oBindingType.isA(["sap.ui.model.odata.type.DateTimeWithTimezone"])) {
+		if (this._isSupportedBindingType(oBindingType)) {
 			return jQuery.extend({}, oBindingType.getFormatOptions());
 		}
 	};
@@ -623,14 +633,14 @@ sap.ui.define([
 	 * @private
 	 */
 	DateTimePicker.prototype._getTimezoneFormatOptions = function(bDisplayFormat) {
-		var oFormatOptions = this._getBindingWithTimezoneFormatOptions() || {},
+		var oFormatOptions = this._getBindingFormatOptions() || {},
 			sFormat = bDisplayFormat ? this.getDisplayFormat() : this.getValueFormat(),
 			oBinding = this.getBinding("value") || this.getBinding("dateValue"),
 			oBindingType = oBinding && oBinding.getType && oBinding.getType();
 
-		if (bDisplayFormat || !this._getTimezone()
-			|| (oBindingType && this._isSupportedBindingType(oBindingType))) {
-			oFormatOptions.showTimezone = DateFormatTimezoneDisplay.Hide;
+		if (bDisplayFormat || !this._getTimezone() ||
+			(oBindingType && !oBindingType.isA(["sap.ui.model.odata.type.DateTimeWithTimezone"]))) {
+			oFormatOptions.showTimezone = false;
 		}
 
 		if (oFormatOptions.relative === undefined) {
@@ -647,7 +657,7 @@ sap.ui.define([
 			oFormatOptions.strictParsing = true;
 		}
 
-		if (sFormat && (!oBinding || !oBindingType || !this._isSupportedBindingType(oBindingType))) {
+		if (sFormat && !this._isSupportedBindingType(oBindingType)) {
 			oFormatOptions[this._checkStyle(sFormat) ? "style" : "pattern"] = sFormat;
 		}
 
@@ -674,7 +684,7 @@ sap.ui.define([
 			oBindingType = oBinding && oBinding.getType();
 
 		if (this.getShowTimezone() === undefined && oBindingType && oBindingType.isA(["sap.ui.model.odata.type.DateTimeWithTimezone"])) {
-			return oBindingType.getFormatOptions().showTimezone !== DateFormatTimezoneDisplay.Hide;
+			return oBindingType.getFormatOptions().showTimezone !== false;
 		}
 
 		return this.getShowTimezone();
@@ -739,14 +749,10 @@ sap.ui.define([
 			oBindingType = oBinding && oBinding.getType(),
 			aDateWithTimezone;
 
-		if (oBindingType) {
-			if (oBindingType.isA(["sap.ui.model.odata.type.DateTimeWithTimezone"])) {
-				var aCurrentBindingValues = oBinding.getCurrentValues().slice(0);
-				aCurrentBindingValues[1] = sTimezone || this._getTimezone(true);
-				return oBindingType.parseValue(sValue, "string", aCurrentBindingValues)[0];
-			} else if (!bDisplayFormat && this._isSupportedBindingType(oBindingType)) {
-				return DatePicker.prototype._parseValue.apply(this, arguments);
-			}
+		if (oBindingType && oBindingType.isA(["sap.ui.model.odata.type.DateTimeWithTimezone"])) {
+			var aCurrentBindingValues = oBinding.getCurrentValues().slice(0);
+			aCurrentBindingValues[1] = sTimezone || this._getTimezone(true);
+			return oBindingType.parseValue(sValue, "string", aCurrentBindingValues)[0];
 		}
 
 		aDateWithTimezone = this._getFormatter(bDisplayFormat)
@@ -767,6 +773,36 @@ sap.ui.define([
 		return this._getFormatter(!bValueFormat).format(oDate, sTimezone || this._getTimezone(true));
 	};
 
+	/**
+	 * Tries to parse the value to see if it is a timezone only string.
+	 * @param {string} sValue A value string
+	 * @return {string|null} An empty string indicating success or null
+	 * @private
+	 */
+	DateTimePicker.prototype._fallbackParse = function(sValue) {
+		return this._getFallbackParser().parse(sValue) ? "" : null;
+	};
+
+	DateTimePicker.prototype._getFallbackParser = function() {
+		if (!this._fallbackParser) {
+			this._fallbackParser = DateFormat.getDateTimeWithTimezoneInstance({
+				showDate: false,
+				showTime: false,
+				showTimezone: true
+			});
+		}
+
+		return this._fallbackParser;
+	};
+
+	DateTimePicker.prototype._getPickerParser = function() {
+		if (!this._clocksParser) {
+			this._clocksParser = DateFormat.getDateTimeWithTimezoneInstance({ showTimezone: false });
+		}
+
+		return this._clocksParser;
+	};
+
 	DateTimePicker.prototype._getLocaleBasedPattern = function(sPlaceholder) {
 		var oLocaleData = LocaleData.getInstance(
 				Core.getConfiguration().getFormatSettings().getFormatLocale()
@@ -856,7 +892,7 @@ sap.ui.define([
 		this.addStyleClass(InputBase.ICON_PRESSED_CSS_CLASS);
 
 		var oPopover = this._oPopup.getAggregation("_popup");
-		oPopover.oPopup.setAutoCloseAreas([oDomRef]);
+		oPopover.oPopup.setExtraContent([oDomRef]);
 
 		this._oPopup.openBy(oDomRef || this);
 	};
@@ -923,6 +959,10 @@ sap.ui.define([
 			this._oOKButton.setEnabled(false);
 		}
 
+		// convert the date to local date for the calendar and the clocks
+		sFormattedDate = this._getPickerParser().format(oDate, this._getTimezone(true));
+		oDate = this._getPickerParser().parse(sFormattedDate, TimezoneUtil.getLocalTimezone())[0];
+
 		this._oCalendar.focusDate(oDate);
 
 		if (bDateFound) {
@@ -931,17 +971,17 @@ sap.ui.define([
 			}
 		}
 
-		sFormattedDate = this._formatValue(oDate, false);
-		oDate = this._parseValue(sFormattedDate, true, Core.getConfiguration().getTimezone());
 		this._oClocks._setTimeValues(oDate);
 	};
 
 	DateTimePicker.prototype._getSelectedDate = function(){
-
 		var oDate = DatePicker.prototype._getSelectedDate.apply(this, arguments),
 			sFormattedDate;
 
 		if (oDate) {
+			sFormattedDate = this._getPickerParser().format(oDate, TimezoneUtil.getLocalTimezone());
+			oDate = this._getPickerParser().parse(sFormattedDate, this._getTimezone(true))[0];
+
 			var oDateTime = this._oClocks.getTimeValues();
 			var sPattern = this._oClocks._getDisplayFormatPattern();
 			if (sPattern.search("h") >= 0 || sPattern.search("H") >= 0) {
@@ -961,9 +1001,6 @@ sap.ui.define([
 			}
 		}
 
-		sFormattedDate = this._formatValue(oDate, false, Core.getConfiguration().getTimezone());
-		oDate = this._parseValue(sFormattedDate, true, this._getTimezone(true));
-
 		return oDate;
 	};
 
@@ -1010,23 +1047,23 @@ sap.ui.define([
 		} else {
 			oSwitcher.setVisible(false);
 			oClocks.$().css("display", "");
-			oCalendar.$().css("display", "");
+			oCalendar.$().css("display", "flex");
 		}
 	};
 
 	function _handleAfterOpen(oEvent){
-		this.$("inner").attr("aria-expanded", true);
 		this._oCalendar.focus();
 
 		Device.media.attachHandler(this._handleWindowResize, this);
+		this.fireAfterValueHelpOpen();
 	}
 
 	function _handleAfterClose(){
 		this.removeStyleClass(InputBase.ICON_PRESSED_CSS_CLASS);
-		this.$("inner").attr("aria-expanded", false);
 
 		this._oCalendar._closePickers();
 		Device.media.detachHandler(this._handleWindowResize, this);
+		this.fireAfterValueHelpClose();
 	}
 
 	function _getTimePattern(){
@@ -1065,15 +1102,9 @@ sap.ui.define([
 	}
 
 	function _handleCalendarSelect(oEvent) {
-		var oDelegate = {
-			onAfterRendering: function () {
-				this._oPopupContent.getCalendar().getAggregation("month")[0].removeEventDelegate(oDelegate, this);
-				this._oPopupContent.switchToTime();
-				this._oPopupContent.getClocks()._focusActiveButton();
-			}
-		};
+		this._oPopupContent.switchToTime();
+		this._oPopupContent.getClocks()._focusActiveButton();
 		this._oOKButton.setEnabled(true);
-		this._oPopupContent.getCalendar().getAggregation("month")[0].addEventDelegate(oDelegate, this);
 	}
 
 	return DateTimePicker;

package/src/sap/m/DateTimePickerRenderer.js

@@ -15,6 +15,14 @@ sap.ui.define(['sap/ui/core/Renderer', './DatePickerRenderer', './InputBaseRende
 
 	DateTimePickerRenderer.apiVersion = 2;
 
+	DateTimePickerRenderer.writeInnerValue = function(oRm, oControl) {
+		if (!oControl.getDateValue() && typeof oControl._prefferedValue === "string") {
+			oRm.attr("value", oControl._prefferedValue);
+		} else {
+			DatePickerRenderer.writeInnerValue.apply(this, arguments);
+		}
+	};
+
 	DateTimePickerRenderer.getDescribedByAnnouncement = function(oDP) {
 
 		var sBaseAnnouncement = InputBaseRenderer.getDescribedByAnnouncement.apply(this, arguments);
@@ -39,10 +47,9 @@ sap.ui.define(['sap/ui/core/Renderer', './DatePickerRenderer', './InputBaseRende
 
 		oRm.openStart("div", oControl.getId() + "-timezoneLabel");
 		oRm.class("sapMDTPTimezoneLabel");
-		oRm.attr("title", sTimezone);
 		oRm.openEnd();
 
-		oRm.openStart("span");
+		oRm.openStart("span", oControl.getId() + "-timezoneID");
 		oRm.openEnd();
 		oRm.text(sTimezone);
 		oRm.close("span");
@@ -55,8 +62,8 @@ sap.ui.define(['sap/ui/core/Renderer', './DatePickerRenderer', './InputBaseRende
 
 		// try to choose the date that is the longest when formatted
 		oRm.text(oControl._getFormatter(true).format(
-			new Date(2000, 10, 20, 10, 10, 10),
-			sap.ui.getCore().getConfiguration().getTimezone()));
+			new Date(Date.UTC(2000, 10, 20, 10, 10, 10)),
+			"UTC"));
 		oRm.close("span");
 	};
 
@@ -70,6 +77,16 @@ sap.ui.define(['sap/ui/core/Renderer', './DatePickerRenderer', './InputBaseRende
 		}
 	};
 
+	DateTimePickerRenderer.getAriaDescribedBy = function(oControl) {
+		var sDescribedBy = InputBaseRenderer.getAriaDescribedBy.apply(this, arguments);
+
+		if (oControl._getShowTimezone()) {
+			sDescribedBy += " " + oControl.getId() + "-timezoneID";
+		}
+
+		return sDescribedBy;
+	};
+
 	return DateTimePickerRenderer;
 
 }, /* bExport= */ true);

package/src/sap/m/Dialog.js

@@ -164,7 +164,7 @@ function(
 		* <li>If the <code>contentWidth</code> and/or <code>contentHeight</code> properties are set, the Dialog will try to fill those sizes.</li>
 		* <li>If there is no specific sizing, the Dialog will try to adjust its size to its content.</li>
 		* </ul>
-		* When using the <code>sap.m.Dialog</code> in SAP Quartz themes, the breakpoints and layout paddings could be determined by the Dialog's width. To enable this concept and add responsive paddings to an element of the Dialog control, you have to add the following classes depending on your use case: <code>sapUiResponsivePadding--header</code>, <code>sapUiResponsivePadding--subHeader</code>, <code>sapUiResponsivePadding--content</code>, <code>sapUiResponsivePadding--footer</code>.
+		* When using the <code>sap.m.Dialog</code> in SAP Quartz and Horizon themes, the breakpoints and layout paddings could be determined by the Dialog's width. To enable this concept and add responsive paddings to an element of the Dialog control, you have to add the following classes depending on your use case: <code>sapUiResponsivePadding--header</code>, <code>sapUiResponsivePadding--subHeader</code>, <code>sapUiResponsivePadding--content</code>, <code>sapUiResponsivePadding--footer</code>.
 		* <h4>Smartphones</h4>
 		* If the Dialog has one or two actions, they will cover the entire footer. If there are more actions, they will overflow.
 		* <h4>Tablets</h4>
@@ -175,7 +175,7 @@ function(
 		*
 		* @implements sap.ui.core.PopupInterface
 		* @author SAP SE
-		* @version 1.99.1
+		* @version 1.102.0
 		*
 		* @constructor
 		* @public
@@ -325,13 +325,23 @@ function(
 					customHeader: {type: "sap.m.IBar", multiple: false},
 
 					/**
-					 * The button which is rendered to the left side (right side in RTL mode) of the <code>endButton</code> in the footer area inside the Dialog. As of version 1.21.1, there's a new aggregation <code>buttons</code> created with which more than 2 buttons can be added to the footer area of the Dialog. If the new <code>buttons</code> aggregation is set, any change made to this aggregation has no effect anymore. With the Belize themes when running on a phone, this <code>button</code> (and the <code>endButton</code> together when set) is (are) rendered at the center of the footer area. While with the Quartz themes when running on a phone, this <code>button</code> (and the <code>endButton</code> together when set) is (are) rendered on the right side of the footer area. When running on other platforms, this <code>button</code> (and the <code>endButton</code> together when set) is (are) rendered at the right side (left side in RTL mode) of the footer area.
+					 * The button which is rendered to the left side (right side in RTL mode) of the <code>endButton</code> in the footer area inside the Dialog.
+					 * As of version 1.21.1, there's a new aggregation <code>buttons</code> created with which more than 2 buttons can be added to the footer area of the Dialog.
+					 * If the new <code>buttons</code> aggregation is set, any change made to this aggregation has no effect anymore.
+					 * With the Belize themes when running on a phone, this <code>button</code> (and the <code>endButton</code> together when set) is (are) rendered at the center of the footer area.
+					 * While with the Quartz themes when running on a phone, this <code>button</code> (and the <code>endButton</code> together when set) is (are) rendered on the right side of the footer area.
+					 * When running on other platforms, this <code>button</code> (and the <code>endButton</code> together when set) is (are) rendered at the right side (left side in RTL mode) of the footer area.
 					 * @since 1.15.1
 					 */
 					beginButton: {type: "sap.m.Button", multiple: false},
 
 					/**
-					 * The button which is rendered to the right side (left side in RTL mode) of the <code>beginButton</code> in the footer area inside the Dialog. As of version 1.21.1, there's a new aggregation <code>buttons</code> created with which more than 2 buttons can be added to the footer area of Dialog. If the new <code>buttons</code> aggregation is set, any change made to this aggregation has no effect anymore. With the Belize themes when running on a phone, this <code>button</code> (and the <code>beginButton</code> together when set) is (are) rendered at the center of the footer area. While with the Quartz themes when running on a phone, this <code>button</code> (and the <code>beginButton</code> together when set) is (are) rendered on the right side of the footer area. When running on other platforms, this <code>button</code> (and the <code>beginButton</code> together when set) is (are) rendered at the right side (left side in RTL mode) of the footer area.
+					 * The button which is rendered to the right side (left side in RTL mode) of the <code>beginButton</code> in the footer area inside the Dialog.
+					 * As of version 1.21.1, there's a new aggregation <code>buttons</code> created with which more than 2 buttons can be added to the footer area of Dialog.
+					 * If the new <code>buttons</code> aggregation is set, any change made to this aggregation has no effect anymore.
+					 * With the Belize themes when running on a phone, this <code>button</code> (and the <code>beginButton</code> together when set) is (are) rendered at the center of the footer area.
+					 * While with the Quartz themes when running on a phone, this <code>button</code> (and the <code>beginButton</code> together when set) is (are) rendered on the right side of the footer area.
+					 * When running on other platforms, this <code>button</code> (and the <code>beginButton</code> together when set) is (are) rendered at the right side (left side in RTL mode) of the footer area.
 					 * @since 1.15.1
 					 */
 					endButton: {type: "sap.m.Button", multiple: false},
@@ -550,10 +560,13 @@ function(
 			this._createToolbarButtons();
 
 			if (Core.getConfiguration().getAccessibility() && this.getState() != ValueState.None) {
-				var oValueState = new InvisibleText({text: this.getValueStateString(this.getState())});
+				if (!this._oValueState) {
+					this._oValueState = new InvisibleText();
 
-				this.setAggregation("_valueState", oValueState);
-				this.addAriaLabelledBy(oValueState.getId());
+					this.setAggregation("_valueState", this._oValueState);
+					this.addAriaLabelledBy(this._oValueState.getId());
+				}
+				this._oValueState.setText(this.getValueStateString(this.getState()));
 			}
 
 			// title alignment

package/src/sap/m/DialogRenderer.js

@@ -151,7 +151,7 @@ sap.ui.define([
 		if (Device.system.desktop) {
 
 			if (oDialog.getResizable() && !bStretch) {
-				oRM.icon("sap-icon://resize-corner", ["sapMDialogResizeHandler"], { "title": "" });
+				oRM.icon("sap-icon://resize-corner", ["sapMDialogResizeHandler"], {"title": "", "aria-label": ""});
 			}
 
 			// Invisible element which is used to determine when desktop keyboard navigation

package/src/sap/m/DisplayListItem.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.99.1
+	 * @version 1.102.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/DisplayListItemRenderer.js

@@ -24,12 +24,10 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/core/Renderer", "./ListItemBaseRen
 	 * Renders the HTML for the given control, using the provided
 	 * {@link sap.ui.core.RenderManager}.
 	 *
-	 * @param {sap.ui.core.RenderManager}
-	 *          oRenderManager the RenderManager that can be used for writing to the
-	 *          Render-Output-Buffer
-	 * @param {sap.m.DisplayListItem}
-	 *          oControl an object representation of the control that should be
-	 *          rendered
+	 * @param {sap.ui.core.RenderManager} rm
+	 *          RenderManager that can be used to render the control's DOM
+	 * @param {sap.m.DisplayListItem} oLI
+	 *          The item to be rendered
 	 */
 	DisplayListItemRenderer.renderLIAttributes = function(rm, oLI) {
 		rm.class("sapMDLI");

package/src/sap/m/DraftIndicator.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @abstract
 	 *
 	 * @author SAP SE
-	 * @version 1.99.1
+	 * @version 1.102.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/DynamicDate.js

@@ -36,7 +36,7 @@ sap.ui.define([
 		 * @extends sap.ui.model.SimpleType
 		 *
 		 * @author SAP SE
-		 * @version 1.99.1
+		 * @version 1.102.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/DynamicDateFormat.js

@@ -124,7 +124,7 @@ sap.ui.define([
 		 * Create an instance of the DynamicDateFormat.
 		 *
 		 * @param {object} [oFormatOptions] Object which defines the format options
-		 * @param {{sap.ui.core.Locale}} [oLocale] Locale to get the formatter for
+		 * @param {sap.ui.core.Locale} [oLocale] Locale to get the formatter for
 		 * @return {sap.m.DynamicDateFormat} Instance of the DynamicDateFormat
 		 * @private
 		 */
@@ -143,6 +143,7 @@ sap.ui.define([
 			oFormat.oLocaleData = LocaleData.getInstance(oLocale);
 			oFormat.oOriginalFormatOptions = deepExtend({}, DynamicDateFormat.oDefaultDynamicDateFormat, oFormatOptions);
 			oFormat._dateFormatter = DateFormat.getInstance(oFormat.oOriginalFormatOptions["date"]);
+			oFormat._dateTimeFormatter = DateFormat.getDateTimeInstance(oFormat.oOriginalFormatOptions["datetime"]);
 			// hack the date formatter not to parse relative
 			// dates like: "next month", "next quarter", "previous week"
 			[oFormat._dateFormatter].concat(oFormat._dateFormatter.aFallbackFormats).forEach(function(f) {
@@ -151,7 +152,12 @@ sap.ui.define([
 				};
 			});
 
-			oFormat._dateTimeFormatter = DateFormat.getDateTimeInstance(oFormat.oOriginalFormatOptions["datetime"]);
+			[oFormat._dateTimeFormatter].concat(oFormat._dateTimeFormatter.aFallbackFormats).forEach(function(f) {
+				f.parseRelative = function() {
+					return null;
+				};
+			});
+
 			oFormat._monthFormatter = DateFormat.getInstance(oFormat.oOriginalFormatOptions["month"]);
 			oFormat._yearFormatter = DateFormat.getInstance(oFormat.oOriginalFormatOptions["year"]);
 			oFormat._numberFormatter = NumberFormat.getInstance(oFormat.oOriginalFormatOptions["int"]);
@@ -164,10 +170,11 @@ sap.ui.define([
 		 * Formats a list according to the given format options.
 		 *
 		 * @param {object} oObj The value to format
+		 * @param {boolean} bSkipCustomFormatting If set to <code>true</code> the formatter does not format to the equivalent user-friendly string. Instead, the formatter uses the specified option key and parameters.
 		 * @return {string} The formatted output value.
 		 * @public
 		 */
-		DynamicDateFormat.prototype.format = function(oObj) {
+		DynamicDateFormat.prototype.format = function(oObj, bSkipCustomFormatting) {
 			var sKey = oObj.operator;
 			var aParams = oObj.values.slice(0);
 
@@ -183,10 +190,10 @@ sap.ui.define([
 
 				aParams[0] = this._monthFormatter.format(oDate);
 				aParams[1] = this._yearFormatter.format(oDate);
-			} else if (sKey === "LASTDAYS" && aParams[0] === 1) {
+			} else if (sKey === "LASTDAYS" && aParams[0] === 1 && !bSkipCustomFormatting) {
 				sKey = "YESTERDAY";
 				aParams = [];
-			} else if (sKey === "NEXTDAYS" && aParams[0] === 1) {
+			} else if (sKey === "NEXTDAYS" && aParams[0] === 1 && !bSkipCustomFormatting) {
 				sKey = "TOMORROW";
 				aParams = [];
 			} else if ((sKey === "LASTDAYS" || sKey === "NEXTDAYS") && aParams[0] === 0) {
@@ -272,7 +279,7 @@ sap.ui.define([
 							break;
 					}
 
-					if (!oVal) {
+					if (!oVal && oVal !== 0) {
 						aResult = null;
 						break;
 					}

package/src/sap/m/DynamicDateOption.js

@@ -36,7 +36,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Element
 		 *
 		 * @author SAP SE
-		 * @version 1.99.1
+		 * @version 1.102.0
 		 *
 		 * @public
 		 * @since 1.92
@@ -100,7 +100,7 @@ sap.ui.define([
 		 * @public
 		 */
 		DynamicDateOption.prototype.createValueHelpUI = function(oControl, fnControlsUpdated) {
-			var oValue = oControl.getValue(),
+			var oValue = oControl.getValue() && Object.assign({}, oControl.getValue()),
 				aParams = this.getValueHelpUITypes(oControl),
 				valueHelpUiTypesCount = aParams.length,
 				aControls = [],
@@ -111,6 +111,16 @@ sap.ui.define([
 			}
 			oControl.aControlsByParameters[this.getKey()] = [];
 
+			if (oValue && oValue.values) {
+				oValue.values = oValue.values.map(function(val) {
+					if (val instanceof Date) {
+						return oControl._reverseConvertDate(val);
+					}
+
+					return val;
+				});
+			}
+
 			for (var i = 0; i < aParams.length; i++) {
 				if (aParams[i].getText()) {
 					aControls.push(