@openui5/sap.m 1.98.0 → 1.101.0

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);
@@ -30,6 +38,55 @@ sap.ui.define(['sap/ui/core/Renderer', './DatePickerRenderer', './InputBaseRende
 		return mAccessibilityState;
 	};
 
+	DateTimePickerRenderer.writeAdditionalContent = function(oRm, oControl) {
+		var sTimezone = oControl._getTimezone(true);
+
+		if (!oControl._getShowTimezone()) {
+			return;
+		}
+
+		oRm.openStart("div", oControl.getId() + "-timezoneLabel");
+		oRm.class("sapMDTPTimezoneLabel");
+		oRm.openEnd();
+
+		oRm.openStart("span", oControl.getId() + "-timezoneID");
+		oRm.openEnd();
+		oRm.text(sTimezone);
+		oRm.close("span");
+
+		oRm.close("div");
+
+		oRm.openStart("span");
+		oRm.class("sapMDummyContent");
+		oRm.openEnd();
+
+		// try to choose the date that is the longest when formatted
+		oRm.text(oControl._getFormatter(true).format(
+			new Date(Date.UTC(2000, 10, 20, 10, 10, 10)),
+			"UTC"));
+		oRm.close("span");
+	};
+
+	DateTimePickerRenderer.addOuterClasses = function(oRm, oControl) {
+		DatePickerRenderer.addOuterClasses(oRm, oControl);
+
+		oRm.class("sapMDTP");
+
+		if (oControl._getShowTimezone()) {
+			oRm.class("sapMDTPWithTimezone");
+		}
+	};
+
+	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.98.0
+		* @version 1.101.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

@@ -40,7 +40,7 @@ sap.ui.define([
 	 * Renders the HTML for the Dialog control, using the provided {@link sap.ui.core.RenderManager}.
 	 *
 	 * @param {sap.ui.core.RenderManager} oRM The RenderManager that can be used for writing to the render output buffer.
-	 * @param {sap.ui.core.Control} oDialog An object representation of the control that should be rendered.
+	 * @param {sap.m.Dialog} oDialog An object representation of the control that should be rendered.
 	 */
 	DialogRenderer.render = function (oRM, oDialog) {
 		var sId = oDialog.getId(),

package/src/sap/m/DisplayListItem.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.101.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.ui.core.Control}
-	 *          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.98.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/DraftIndicatorRenderer.js

@@ -20,7 +20,7 @@ sap.ui.define([],
 	 * Renders the HTML for the given control, using the provided {@link sap.ui.core.RenderManager}.
 	 *
 	 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
-	 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
+	 * @param {sap.m.DraftIndicator} oControl an object representation of the control that should be rendered
 	 */
 	DraftIndicatorRenderer.render = function(oRm, oControl) {
 

package/src/sap/m/DynamicDate.js

@@ -36,7 +36,7 @@ sap.ui.define([
 		 * @extends sap.ui.model.SimpleType
 		 *
 		 * @author SAP SE
-		 * @version 1.98.0
+		 * @version 1.101.0
 		 *
 		 * @constructor
 		 * @public
@@ -88,7 +88,7 @@ sap.ui.define([
 			var aValueTypes = DynamicDateUtil.getOption(oValue.operator).getValueTypes();
 
 			oResult.values = oResult.values.map(function(oValue, index) {
-				if (aValueTypes[index] === "date") {
+				if (aValueTypes[index] === "date" || aValueTypes[index] === "datetime") {
 					return oTimestampInputFormat.parse(oValue);
 				}
 
@@ -128,7 +128,7 @@ sap.ui.define([
 			aValueTypes = DynamicDateUtil.getOption(oValue.operator).getValueTypes();
 
 			oResult.values = oResult.values.map(function(oValue, index) {
-				if (aValueTypes[index] === "date") {
+				if (aValueTypes[index] === "date" || aValueTypes[index] === "datetime") {
 					return oTimestampInputFormat.format(oValue);
 				}
 

package/src/sap/m/DynamicDateFormat.js

@@ -41,7 +41,9 @@ sap.ui.define([
 		var _dynamicParameterIndexes = {};
 		var aParameterTypesByStandardOptionKey = {
 			"DATE": ["date"],
+			"DATETIME": ["datetime"],
 			"DATERANGE": ["date", "date"],
+			"DATETIMERANGE": ["datetime", "datetime"],
 			"LASTDAYS": ["int"],
 			"LASTWEEKS": ["int"],
 			"LASTMONTHS": ["int"],
@@ -54,7 +56,10 @@ sap.ui.define([
 			"NEXTYEARS": ["int"],
 			"FROM": ["date"],
 			"TO": ["date"],
+			"FROMDATETIME": ["datetime"],
+			"TODATETIME": ["datetime"],
 			"SPECIFICMONTH": ["month"],
+			"SPECIFICMONTHINYEAR": ["month", "int"],
 			"TODAYFROMTO": ["int", "int"]
 		};
 		var aStandardDynamicDateRangeKeysArray = Object.keys(library.StandardDynamicDateRangeKeys);
@@ -109,7 +114,9 @@ sap.ui.define([
 
 		DynamicDateFormat.oDefaultDynamicDateFormat = {
 			"date": {},
+			"datetime": {},
 			"month": { pattern: "MMMM" },
+			"year": { pattern: "yyyy" },
 			"int": {}
 		};
 
@@ -117,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
 		 */
@@ -136,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) {
@@ -144,7 +152,14 @@ sap.ui.define([
 				};
 			});
 
+			[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"]);
 			oFormat._resourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");
 
@@ -166,6 +181,14 @@ sap.ui.define([
 				var oDate = new Date();
 				oDate.setMonth(aParams[0]);
 				aParams[0] = this._monthFormatter.format(oDate);
+			} else if (sKey === "SPECIFICMONTHINYEAR") {
+				var oDate = new Date();
+
+				oDate.setMonth(aParams[0]);
+				oDate.setYear(aParams[1]);
+
+				aParams[0] = this._monthFormatter.format(oDate);
+				aParams[1] = this._yearFormatter.format(oDate);
 			} else if (sKey === "LASTDAYS" && aParams[0] === 1) {
 				sKey = "YESTERDAY";
 				aParams = [];
@@ -175,10 +198,15 @@ sap.ui.define([
 			} else if ((sKey === "LASTDAYS" || sKey === "NEXTDAYS") && aParams[0] === 0) {
 				sKey = "TODAY";
 				aParams = [];
+			} else if (sKey === "DATETIME") {
+				aParams[0] = this._dateTimeFormatter.format(oObj.values[0]);
 			}
 
 			var aFormattedParams = aParams.map(function(param) {
 				if (param instanceof Date) {
+					if (sKey === "DATETIMERANGE" || sKey === "FROMDATETIME" || sKey === "TODATETIME") {
+						return this._dateTimeFormatter.format(param);
+					}
 					return this._dateFormatter.format(param);
 				}
 
@@ -196,6 +224,7 @@ sap.ui.define([
 		 * Parses a given list string into an array.
 		 *
 		 * @param {string} sValue String value to be parsed
+		 * @param {string} sKey String value of the key we will parse for
 		 * @return {object} The parsed output value
 		 * @public
 		 */
@@ -227,6 +256,9 @@ sap.ui.define([
 						case "date":
 							oVal = this._dateFormatter.parse(sCurrentMatch);
 							break;
+						case "datetime":
+							oVal = this._dateTimeFormatter.parse(sCurrentMatch);
+							break;
 						case "month":
 							var aMonthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function(i) {
 								var oDate = new Date();

package/src/sap/m/DynamicDateOption.js

@@ -9,16 +9,20 @@ sap.ui.define([
 	'sap/ui/core/Element',
 	'./Label',
 	'./StepInput',
+	'./DateTimePicker',
 	'sap/ui/unified/Calendar',
 	'sap/ui/unified/DateRange',
-	'sap/ui/unified/calendar/MonthPicker'],
+	'sap/ui/unified/calendar/MonthPicker',
+	'sap/ui/unified/calendar/CustomMonthPicker'],
 	function(
 		Element,
 		Label,
 		StepInput,
+		DateTimePicker,
 		Calendar,
 		DateRange,
-		MonthPicker) {
+		MonthPicker,
+		CustomMonthPicker) {
 		"use strict";
 
 		/**
@@ -32,7 +36,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Element
 		 *
 		 * @author SAP SE
-		 * @version 1.98.0
+		 * @version 1.101.0
 		 *
 		 * @public
 		 * @since 1.92
@@ -96,16 +100,27 @@ sap.ui.define([
 		 * @public
 		 */
 		DynamicDateOption.prototype.createValueHelpUI = function(oControl, fnControlsUpdated) {
-			var oValue = oControl.getValue();
-			var aParams = this.getValueHelpUITypes(oControl);
-			var aControls = [];
-			var oInputControl;
+			var oValue = oControl.getValue() && Object.assign({}, oControl.getValue()),
+				aParams = this.getValueHelpUITypes(oControl),
+				valueHelpUiTypesCount = aParams.length,
+				aControls = [],
+				oInputControl;
 
 			if (!oControl.aControlsByParameters) {
 				oControl.aControlsByParameters = {};
 			}
 			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(
@@ -116,7 +131,7 @@ sap.ui.define([
 					);
 				}
 
-				oInputControl = this._createControl(i, aParams[i].getType(), oValue, fnControlsUpdated);
+				oInputControl = this._createControl(i, aParams[i].getType(), oValue, fnControlsUpdated, valueHelpUiTypesCount);
 
 				aControls.push(oInputControl);
 				oControl.aControlsByParameters[this.getKey()].push(oInputControl);
@@ -148,12 +163,18 @@ sap.ui.define([
 						}
 						break;
 					case "month":
+					case "custommonth":
 					case "date":
 					case "daterange":
 						if (!oInputControl.getSelectedDates() || oInputControl.getSelectedDates().length == 0) {
 							return false;
 						}
 						break;
+					case "datetime":
+						if (!oInputControl.getDateValue()) {
+							return false;
+						}
+						break;
 				}
 			}
 
@@ -191,6 +212,20 @@ sap.ui.define([
 						}
 
 						vOutput = oInputControl.getSelectedDates()[0].getStartDate();
+					break;
+					case "custommonth":
+						if (!oInputControl.getSelectedDates() || !oInputControl.getSelectedDates().length) {
+							return null;
+						}
+
+						vOutput = [oInputControl.getSelectedDates()[0].getStartDate().getMonth(), oInputControl.getSelectedDates()[0].getStartDate().getFullYear()];
+						break;
+					case "datetime":
+						if (!oInputControl.getDateValue()) {
+							return null;
+						}
+
+						vOutput = oInputControl.getDateValue();
 						break;
 					case "daterange":
 						if (!oInputControl.getSelectedDates().length) {
@@ -200,6 +235,8 @@ sap.ui.define([
 						var oEndDate = oInputControl.getSelectedDates()[0].getEndDate() || oInputControl.getSelectedDates()[0].getStartDate();
 						vOutput = [oInputControl.getSelectedDates()[0].getStartDate(), oEndDate];
 						break;
+					default:
+						break;
 				}
 
 				if (Array.isArray(vOutput)) {
@@ -281,7 +318,7 @@ sap.ui.define([
 
 		// PRIVATE
 
-		DynamicDateOption.prototype._createControl = function(iIndex, sUIType, oValue, fnControlsUpdated) {
+		DynamicDateOption.prototype._createControl = function(iIndex, sUIType, oValue, fnControlsUpdated, valueHelpUiTypesCount) {
 			var oInputControl;
 
 			switch (sUIType) {
@@ -291,12 +328,25 @@ sap.ui.define([
 				case "date":
 					oInputControl = this._createDateControl(oValue, iIndex, fnControlsUpdated);
 					break;
+				case "datetime":
+					if (valueHelpUiTypesCount === 1) {
+						// Returns DateTimePicker PopupContent control (single "datetime" option)
+						oInputControl = this._createDateTimeInnerControl(oValue, iIndex, fnControlsUpdated);
+					} else if (valueHelpUiTypesCount === 2) {
+						oInputControl = this._createDateTimeControl(oValue, iIndex, fnControlsUpdated);
+					}
+					break;
 				case "daterange":
 					oInputControl = this._createDateRangeControl(oValue, iIndex, fnControlsUpdated);
 					break;
 				case "month":
 					oInputControl = this._createMonthControl(oValue, iIndex, fnControlsUpdated);
 					break;
+				case "custommonth":
+					oInputControl = this._createCustomMonthControl(oValue, iIndex, fnControlsUpdated);
+					break;
+				default:
+					break;
 			}
 
 			return oInputControl;
@@ -320,6 +370,22 @@ sap.ui.define([
 			return oControl;
 		};
 
+		DynamicDateOption.prototype._createDateTimeControl = function(oValue, iIndex, fnControlsUpdated) {
+			var oControl = new DateTimePicker();
+
+			if (oValue && this.getKey() === oValue.operator) {
+				oControl.setDateValue(oValue.values[iIndex]);
+			}
+
+			if (fnControlsUpdated instanceof Function) {
+				oControl.attachChange(function() {
+					fnControlsUpdated(this);
+				}, this);
+			}
+
+			return oControl;
+		};
+
 		DynamicDateOption.prototype._createDateControl = function(oValue, iIndex, fnControlsUpdated) {
 			var oControl = new Calendar({
 				width: "100%"
@@ -340,6 +406,53 @@ sap.ui.define([
 			return oControl;
 		};
 
+		/**
+		 * Returns DateTimePicker PopupContent control (single "datetime" option)
+		 */
+		DynamicDateOption.prototype._createDateTimeInnerControl = function(oValue, iIndex, fnControlsUpdated) {
+			var oControl = new DateTimePicker({
+					width: "100%"
+				}),
+				oPopupContent;
+
+			// DateTimePicker is created, but only its internal PopupContent control is used
+			oControl._createPopup();
+			oControl._createPopupContent();
+			oPopupContent = oControl._oPopupContent;
+			oPopupContent.setForcePhoneView(true);
+			oPopupContent.getCalendar().removeAllSelectedDates();
+
+			if (oValue && this.getKey() === oValue.operator) {
+				var oValueCopy = new Date(oValue.values[iIndex]); // a copy is used to prevent time setting on pressing Cancel button
+				oPopupContent.getCalendar().addSelectedDate(new DateRange({
+					startDate: oValueCopy
+				}));
+				oPopupContent.getClocks()._setTimeValues(oValueCopy);
+			}
+
+			if (fnControlsUpdated instanceof Function) {
+				// capture live clock changes and update the value
+				oPopupContent.getClocks().getAggregation("_clocks").forEach(function(oClock) {
+					oClock.attachChange(function(oEvent) {
+						fnControlsUpdated(this);
+					}.bind(this));
+				}.bind(this));
+
+				// capture live AM/PM changes and update the value
+				if (oPopupContent.getClocks().getAggregation("_buttonAmPm")) {
+					oPopupContent.getClocks().getAggregation("_buttonAmPm").attachSelectionChange(function(oEvent) {
+						fnControlsUpdated(this);
+					}.bind(this));
+				}
+
+				oPopupContent.getCalendar().attachSelect(function() {
+					fnControlsUpdated(this);
+				}, this);
+			}
+
+			return oPopupContent;
+		};
+
 		DynamicDateOption.prototype._createDateRangeControl = function(oValue, iIndex, fnControlsUpdated) {
 			var oControl = new Calendar({
 				intervalSelection: true,
@@ -382,5 +495,27 @@ sap.ui.define([
 			return oControl;
 		};
 
+		DynamicDateOption.prototype._createCustomMonthControl = function(oValue, iIndex, fnControlsUpdated) {
+			var oControl = new CustomMonthPicker(),
+				oDate = new Date(),
+				iMonth = (oValue && iIndex >= 0 && this.getKey() === oValue.operator) ? oValue.values[iIndex] : oDate.getMonth(),
+				iYear = (oValue  && iIndex >= 0 && this.getKey() === oValue.operator) ? oValue.values[iIndex + 1] : oDate.getFullYear();
+
+			oDate.setDate(1);
+			oDate.setMonth(iMonth);
+			oDate.setYear(iYear);
+			oControl.addSelectedDate(new DateRange({
+				startDate: oDate
+			}));
+
+			if (fnControlsUpdated instanceof Function) {
+				oControl.attachSelect(function() {
+					fnControlsUpdated(this);
+				}, this);
+			}
+
+			return oControl;
+		};
+
 		return DynamicDateOption;
 	});