fit-ui 3.0.0 → 3.2.0

package/dist/Fit.UI.js

@@ -682,7 +682,7 @@ Fit._internal =
 {
 	Core:
 	{
-		VersionInfo: { Major: 3, Minor: 0, Patch: 0 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
+		VersionInfo: { Major: 3, Minor: 2, Patch: 0 } // Do NOT modify format - version numbers are programmatically changed when releasing new versions - MUST be on a separate line!
 	}
 };
 
@@ -5758,6 +5758,40 @@ Fit.Color.HexToRgb = function(hex)
 	return "rgb(" + rgb.Red + ", " + rgb.Green + ", " + rgb.Blue + ")";
 }
 
+/// <function container="Fit.Color" name="GetContrastColor" access="public" static="true" returns="string">
+/// 	<description> Get "black" or "white" depending on which is best suited in combination with specified color </description>
+/// 	<param name="hex" type="string"> HEX color string, e.g. #C0C0C0 (hash symbol is optional) </param>
+/// 	<param name="threshold" type="number" default="undefined">
+/// 		Returns "black" when brightness is above threshold, "white" otherwise.
+/// 		0 = all black, 255 = all white. Value defaults to 128.
+/// 	</param>
+/// </function>
+Fit.Color.GetContrastColor = function(hex, threshold)
+{
+	Fit.Validation.ExpectString(hex);
+	Fit.Validation.ExpectInteger(threshold, true);
+
+	// Validate input
+	if (/^#?[A-Za-z0-9]{6}$/.test(hex) === false)
+	{
+		throw "Invalid HEX color";
+	}
+
+    // Remove hash from color code
+    hex = hex.replace(/^#/, "");
+
+    // Convert HEX to RGB
+    var r = parseInt(hex.substring(0, 2), 16);
+    var g = parseInt(hex.substring(2, 4), 16);
+    var b = parseInt(hex.substring(4, 6), 16);
+
+    // Calculate luminance (perceived brightness)
+    var luminance = (0.299 * r + 0.587 * g + 0.114 * b); // 0 = all black, 255 = all white
+
+    // Return black if the color is light, white otherwise
+	return luminance > (threshold || 128) ? "black" : "white";
+}
+
 /// <container name="Fit.ColorTypeDefs.RgbColor">
 /// 	<description> RGB color object </description>
 /// 	<member name="Red" type="integer"> </member>
@@ -12449,6 +12483,223 @@ Fit.Controls.CheckBox = function(ctlId)
 	init();
 }
 
+/// <container name="Fit.Controls.ColorPicker" extends="Fit.Controls.ControlBase">
+/// 	ColorPicker control which allows for color selection.
+/// 	Extending from Fit.Controls.ControlBase.
+/// </container>
+
+/// <function container="Fit.Controls.ColorPicker" name="ColorPicker" access="public">
+/// 	<description> Create instance of ColorPicker control </description>
+/// 	<param name="ctlId" type="string" default="undefined"> Unique control ID that can be used to access control using Fit.Controls.Find(..) </param>
+/// </function>
+Fit.Controls.ColorPicker = function(ctlId)
+{
+	Fit.Validation.ExpectStringValue(ctlId, true);
+	Fit.Core.Extend(this, Fit.Controls.ControlBase).Apply(ctlId);
+
+	var me = this;
+	var colorPicker = null;			// Native color picker control: <input type="color">
+	var lblValue = null;			// Label showing selected HEX color code
+	var orgColor = "";				// Holds initial value used to determine IsDirty state
+	var prevColor = "";				// Holds latest change made by user - used to determine whether OnChange needs to be fired
+	var cmdClear = null;			// Clear button to remove color selection (transparency)
+	var defaultColor = "#FFD6D6";	// Color (use upper case!) that is unlikely to be used - OnChange won't fire if we click on the initially selected color, so this color cannot be selected without selecting another color first
+
+	// ============================================
+	// Init
+	// ============================================
+
+	function init()
+	{
+		me.AddCssClass("FitUiControlColorPicker");
+		transparent(true);
+
+		colorPicker = document.createElement("input");
+		colorPicker.type = "color";
+		colorPicker.value = defaultColor;
+		colorPicker.oninput = function() // Contrary to OnChange, OnInput fires continuously
+		{
+			if (me === null)
+			{
+				// Fix for Chrome which fires OnChange and OnBlur (in both capturering and bubbling phase)
+				// if control has focus while being removed from DOM, e.g. if used in a dialog closed using ESC.
+				// More details here: https://bugs.chromium.org/p/chromium/issues/detail?id=866242
+				return;
+			}
+
+			transparent(false);
+			fireOnChange();
+		}
+		me._internal.AddDomElement(colorPicker);
+
+		lblValue = document.createElement("span");
+		lblValue.tabIndex = -1;
+		lblValue.onclick = function(e)
+		{
+			if (window.getSelection().isCollapsed === true) // No selection - open picker - otherwise user is likely trying to copy color which color picker will prevent
+			{
+				colorPicker.click();
+			}
+		}
+		me._internal.AddDomElement(lblValue);
+
+		cmdClear = document.createElement("span");
+		cmdClear.tabIndex = -1;
+		cmdClear.innerHTML = "&times;";
+		cmdClear.onclick = function()
+		{
+			colorPicker.focus(); // Move focus to color picker - clear button will be hidden when transparent
+			transparent(true);
+
+			colorPicker.value = defaultColor;
+			prevColor = defaultColor;
+
+			fireOnChange();
+		}
+		me._internal.AddDomElement(cmdClear);
+	}
+
+	// ============================================
+	// Public - overrides
+	// ============================================
+
+	// See documentation on ControlBase
+	this.Focused = function(focus)
+	{
+		Fit.Validation.ExpectBoolean(focus, true);
+
+		if (Fit.Validation.IsSet(focus) === true && focus !== me.Focused())
+		{
+			if (focus === true)
+			{
+				colorPicker.focus();
+			}
+			else
+			{
+				Fit.Dom.GetFocused().blur(); // Multiple elements can hold focus - we have ensured control is the one having focus (me.Focused() above)
+			}
+		}
+
+		return Fit.Dom.Contained(me.GetDomElement(), Fit.Dom.GetFocused());
+	}
+
+	// See documentation on ControlBase
+	this.Value = function(val, preserveDirtyState)
+	{
+		Fit.Validation.ExpectString(val, true);
+		Fit.Validation.ExpectBoolean(preserveDirtyState, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			val = val.toUpperCase();
+
+			if (me.Value() !== val)
+			{
+				var changed = false;
+
+				if (val === "")
+				{
+					transparent(true);
+					changed = true;
+				}
+				else if (isValidColor(val) === true)
+				{
+					transparent(false);
+					colorPicker.value = val;
+					changed = true;
+				}
+
+				if (changed === true)
+				{
+					orgColor = (preserveDirtyState !== true ? val : orgColor);
+					fireOnChange();
+				}
+			}
+		}
+
+		return (transparent() ? "" : colorPicker.value.toUpperCase());
+	}
+
+	// See documentation on ControlBase
+	this.IsDirty = function()
+	{
+		return (orgColor !== me.Value());
+	}
+
+	// See documentation on ControlBase
+	this.Clear = function()
+	{
+		me.Value("");
+	}
+
+	// See documentation on ControlBase
+	this.Dispose = Fit.Core.CreateOverride(this.Dispose, function()
+	{
+		me = colorPicker = lblValue = orgColor = prevColor = cmdClear = defaultColor = null;
+		base();
+	});
+
+	// ============================================
+	// Public
+	// ============================================
+
+	this.ShowValue = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			lblValue.style.display = (val === false ? "none" : "");
+		}
+
+		return lblValue.style.display === "";
+	}
+
+	// ============================================
+	// Private
+	// ============================================
+
+	function transparent(val)
+	{
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			me._internal.Data("transparent", val ? "true" : "false");
+		}
+
+		return me._internal.Data("transparent") === "true";
+	}
+
+	function isValidColor(val)
+	{
+		return /^#[A-F0-9]{6}$/.test(val);
+	}
+
+	function fireOnChange()
+	{
+		var newVal = me.Value();
+		var compareValue = prevColor.toUpperCase(); // Value() returns uppercase value for color picker - preVal might be in lower case if assigned before input type was changed
+
+		if (newVal !== compareValue)
+		{
+			prevColor = newVal;
+			me._internal.FireOnChange();
+
+			var contrastColor = me.Value() !== "" ? Fit.Color.GetContrastColor(me.Value(), 120) : "black";
+
+			// Update control's background color
+			me.GetDomElement().style.background = me.Value();
+
+			// Update label showing color code
+			lblValue.innerHTML = me.Value();
+			lblValue.style.color = contrastColor;
+
+			// Update clear button's contract color
+			cmdClear.style.color = contrastColor;
+		}
+	}
+
+	init();
+}
 /// <container name="Fit.Controls.ContextMenu" extends="Fit.Controls.Component">
 /// 	ContextMenu control allowing for quick access to select features.
 /// </container>
@@ -13728,6 +13979,7 @@ Fit.Controls.DatePicker = function(ctlId)
 	var me = this;
 	var input = null;							// Input field for date
 	var inputTime = null;						// Input field for time (Null if not enabled)
+	var icon = null;							// Calendar icon which opens calendar widget without focusing input (which brings up virtual keyboard on touch devices)
 	var orgVal = null;							// Date object containing control value set using Value(..) or Date(..) - used to determine Dirty state (holds both date and time portion)
 	var preVal = "";							// Previous valid date value as string (without time portion)
 	var prevTimeVal = "";						// Previous valid time value as string (without date portion)
@@ -13744,6 +13996,8 @@ Fit.Controls.DatePicker = function(ctlId)
 	var datePickerYears = "c-10:c+10";			// Calendar widget's year range (from current year, going 10 years back and 10 years forward)
 	var datepickerDate = null;					// Which date to display in the calendar widget when no date is selected - null or Date
 	var startDate = null;						// Which year/month to display in calendar widget if view needs to be restored (related to restoreView variable)
+	var selectWeek = false;						// Whether to select an entire week when a day is selected
+	var middleOfWeek = null;					// Wednesday in selected week when selectWeek is enabled - used to select correct week when changing locale
 	var open = false;							// Whether calendar widget is currently open
 	var focused = false;						// Whether control is currently focused
 	var restoreView = false;					// Whether to keep calendar widget on given year/month when temporarily closing and opening it again
@@ -13752,7 +14006,7 @@ Fit.Controls.DatePicker = function(ctlId)
 	var detectBoundariesRelToViewPort = false;	// Flag indicating whether calendar widget should be positioned relative to viewport (true) or scroll parent (false)
 
 	//var isMobile = Fit.Browser.GetInfo().IsMobile || (Fit.Browser.GetInfo().IsTouchEnabled && Fit.Browser.GetInfo().Name === "Safari"); // More recent versions of Safari on iPad identifies as a Mac computer by default ("Request desktop website" is enabled by default)
-	var isMobile = Fit.Device.OptimizeForTouch;
+	var isMobile = Fit.Device.OptimizeForTouch === true && Fit._internal.Controls.DatePicker.UseNativePickerOnTouch === true;
 	var inputMobile = null;		// Native date picker on mobile devices - value selected is synchronized to input field defined above (remains Null on desktop devices)
 	var inputTimeMobile = null;	// Native time picker on mobile devices - value selected is synchronized to inputTime field defined above (remains Null on desktop devices)
 
@@ -13769,6 +14023,12 @@ Fit.Controls.DatePicker = function(ctlId)
 		input.placeholder = getDatePlaceholder();
 		input.tabIndex = ((isMobile === true) ? -1 : 0);
 
+		// Prevent jQuery UI from focusing input field when calendar is opened (brings up virtual keyboard on touch devices).
+		// https://github.com/Jemt/Fit.UI/blob/5e8f2183d75ae17ddb8086ebbe39025a7a7c98bb/Resources/JqueryUI-1.11.4.custom/jquery-ui.js#L1090
+		// => https://github.com/Jemt/Fit.UI/blob/5e8f2183d75ae17ddb8086ebbe39025a7a7c98bb/Resources/JqueryUI-1.11.4.custom/external/jquery/jquery.js#L5268
+		input._focus = input.focus;
+		input.focus = function() { console.debug("focus() disabled for this input field"); };
+
 		input.onkeydown = function(e)
 		{
 			// Open calendar when arrow down key is pressed
@@ -13790,6 +14050,16 @@ Fit.Controls.DatePicker = function(ctlId)
 			if (input.value !== "" && curDateTime === null)
 				return; // Invalid value
 
+			if (selectWeek === true)
+			{
+				middleOfWeek = getMiddleOfWeek(curDateTime);
+
+				if (selectFirstDayOfWeek() === true) // Returns true if date was changed and OnChange was fired - will not change if date selected is start of week or within currently selected week
+				{
+					return; // OnChange fired from selectFirstDayOfWeek() above
+				}
+			}
+
 			var curDateStr = ((curDateTime !== null) ? Fit.Date.Format(curDateTime, me.Format()) : ""); // Not using Value() which includes time if enabled
 
 			if (curDateStr !== preVal)
@@ -13843,7 +14113,11 @@ Fit.Controls.DatePicker = function(ctlId)
 
 		input.onclick = function()
 		{
-			me.Show();
+			// Open calendar widget when input is clicked on Desktop, or if TriggerIcon is disabled
+			if (Fit.Device.OptimizeForTouch === false || me.TriggerIcon() === false)
+			{
+				me.Show();
+			}
 		}
 
 		// Prevent OnFocus from firing when user interacts with calendar widget which
@@ -13930,6 +14204,20 @@ Fit.Controls.DatePicker = function(ctlId)
 		me._internal.AddDomElement(input);
 		me.AddCssClass("FitUiControlDatePicker");
 
+		icon = document.createElement("span");
+		icon.className = "fa fa-calendar";
+		icon.tabIndex = -1;
+		icon.onclick = function(e)
+		{
+			me.Show();
+
+			if (me.TriggerIcon() === false) // Focus input if icon is hidden
+			{
+				input._focus();
+			}
+		}
+		me._internal.AddDomElement(icon);
+
 		me._internal.Data("weeks", "false");
 		me._internal.Data("time", "false");
 
@@ -13949,7 +14237,7 @@ Fit.Controls.DatePicker = function(ctlId)
 
 			me.OnChange(function(sender)
 			{
-				if (me.Value() === "") // Value reset
+				if (me.Value() === "" && datepickerDate !== null) // Value reset
 				{
 					selectDateInMobileDatePicker(datepickerDate);
 				}
@@ -13991,7 +14279,14 @@ Fit.Controls.DatePicker = function(ctlId)
 		{
 			if (focus === true && me.Focused() === false)
 			{
-				((inputMobile === null) ? input : inputMobile).focus();
+				if (inputMobile === null)
+				{
+					input._focus();
+				}
+				else
+				{
+					inputMobile.focus();
+				}
 			}
 			else if (focus === false && me.Focused() === true)
 			{
@@ -14084,6 +14379,19 @@ Fit.Controls.DatePicker = function(ctlId)
 
 		if (Fit.Validation.IsSet(val) === true)
 		{
+			if (selectWeek === true && val !== "")
+			{
+				// Move date to start of week
+
+				var curDate = getDateFromString(val + (val.indexOf(":") === -1 ? " 00:00" : ""), inputTime !== null); // Returns null if val is empty or invalid
+				var startOfWeek = curDate && getStartOfWeek(curDate);
+
+				if (curDate !== null && curDate.getTime() !== startOfWeek.getTime())
+				{
+					val = Fit.Date.Format(startOfWeek, "YYYY-MM-DD" + (inputTime !== null ? " hh:mm" : ""));
+				}
+			}
+
 			var fireOnChange = (me.Value() !== val);
 			var wasOpen = open;
 
@@ -14121,6 +14429,11 @@ Fit.Controls.DatePicker = function(ctlId)
 
 				if (inputTimeMobile !== null)
 					inputTimeMobile.value = inputTime.value;
+
+				if (selectWeek === true)
+				{
+					middleOfWeek = getMiddleOfWeek(date);
+				}
 			}
 			else
 			{
@@ -14143,6 +14456,11 @@ Fit.Controls.DatePicker = function(ctlId)
 
 				if (inputTimeMobile !== null)
 					inputTimeMobile.value = "";
+
+				if (selectWeek === true)
+				{
+					middleOfWeek = null;
+				}
 			}
 
 			if (wasOpen === true)
@@ -14274,7 +14592,7 @@ Fit.Controls.DatePicker = function(ctlId)
 
 		Fit.Internationalization.RemoveOnLocaleChanged(localize);
 
-		me = input = inputTime = orgVal = preVal = prevTimeVal = locale = localeEnforced = format = formatEnforced = placeholderDate = placeholderTime = weeks = jquery = datepicker = datepickerElm = startDate = open = focused = restoreView = updateCalConf = detectBoundaries = detectBoundariesRelToViewPort = isMobile = inputMobile = inputTimeMobile = null;
+		me = input = inputTime = icon = orgVal = preVal = prevTimeVal = locale = localeEnforced = format = formatEnforced = placeholderDate = placeholderTime = weeks = jquery = datepicker = datepickerElm = startDate = selectWeek = middleOfWeek = open = focused = restoreView = updateCalConf = detectBoundaries = detectBoundariesRelToViewPort = isMobile = inputMobile = inputTimeMobile = null;
 		base();
 	});
 
@@ -14299,7 +14617,7 @@ Fit.Controls.DatePicker = function(ctlId)
 		if (val !== undefined) // Allow Null
 		{
 			if (val !== null)
-				me.Value(val.getFullYear() + "-" + (val.getMonth() + 1) + "-" + val.getDate() + " " + val.getHours() + ":" + val.getMinutes());
+				me.Value(Fit.Date.Format(val, "YYYY-MM-DD hh:mm"));
 			else
 				me.Clear();
 		}
@@ -14307,30 +14625,7 @@ Fit.Controls.DatePicker = function(ctlId)
 		// Get current value
 
 		var value = me.Value();
-		var date = null;
-
-		if (value !== "")
-		{
-			try
-			{
-				date = Fit.Date.Parse(value, "YYYY-MM-DD" + ((inputTime !== null) ? " hh:mm" : ""));
-			}
-			catch (err)
-			{
-			}
-		}
-
-		if (date !== null)
-		{
-			if (inputTime === null)
-			{
-				date.setHours(0);
-				date.setMinutes(0);
-			}
-
-			date.setSeconds(0);
-			date.setMilliseconds(0);
-		}
+		var date = getDateFromString(value, inputTime !== null);
 
 		return date;
 	}
@@ -14366,6 +14661,11 @@ Fit.Controls.DatePicker = function(ctlId)
 		{
 			localeEnforced = true;
 			setLocale(val);
+
+			if (selectWeek === true)
+			{
+				selectFirstDayOfWeek(middleOfWeek);
+			}
 		}
 
 		return locale;
@@ -14443,6 +14743,66 @@ Fit.Controls.DatePicker = function(ctlId)
 		return placeholderTime;
 	}
 
+	/// <function container="Fit.Controls.DatePicker" name="TriggerIcon" access="public" returns="boolean">
+	/// 	<description> Get/set value indicating whether a DatePicker trigger icon is shown </description>
+	/// 	<param name="val" type="boolean" default="undefined"> If defined, True enables trigger icon (default), False disables it </param>
+	/// </function>
+	this.TriggerIcon = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			// Using opacity to hide icon as this allows us to still focus it on touch devices,
+			// rather than focusing the input field, which will bring up the virtual keyboard.
+			icon.style.opacity = val === false ? "0" : "";
+		}
+
+		return icon.style.opacity === "";
+	}
+
+	/// <function container="Fit.Controls.DatePicker" name="SelectWeek" access="public" returns="boolean">
+	/// 	<description> Get/set value indicating whether an entire week is selected, in which case the first day of the week is returned as control value </description>
+	/// 	<param name="val" type="boolean" default="undefined"> If defined, True enables week selection, False disables it (default) </param>
+	/// </function>
+	this.SelectWeek = function(val)
+	{
+		Fit.Validation.ExpectBoolean(val, true);
+
+		if (Fit.Validation.IsSet(val) === true)
+		{
+			if (val !== selectWeek)
+			{
+				var wasOpen = open;
+
+				// data-select-week attribute is added or removed when shared picker is opened,
+				// so we need to close it and reopen it, for change to take effect - see Show().
+
+				if (wasOpen === true)
+				{
+					restoreView = true;
+					me.Hide();
+				}
+
+				middleOfWeek = val === true ? getMiddleOfWeek(me.Date()) : null;
+				selectWeek = val;
+
+				if (val === true)
+				{
+					selectFirstDayOfWeek();
+				}
+
+				if (wasOpen === true)
+				{
+					me.Show();
+					restoreView = false;
+				}
+			}
+		}
+
+		return selectWeek;
+	}
+
 	this.WeekNumbers = function(val) // Not supported on mobile, and jQuery calendar is buggy: https://bugs.jqueryui.com/ticket/14907
 	{
 		Fit.Validation.ExpectBoolean(val, true);
@@ -14720,6 +15080,8 @@ Fit.Controls.DatePicker = function(ctlId)
 					// by detecting the presence of a data-disable-light-dismiss="true" attribute.
 					Fit.Dom.Data(calendarWidget, "disable-light-dismiss", "true");
 
+					Fit.Dom.Data(calendarWidget, "select-week", selectWeek ? "true" : "false");
+
 					moveCalenderWidgetLocally();
 
 					if (focused === inputTime)
@@ -14731,6 +15093,7 @@ Fit.Controls.DatePicker = function(ctlId)
 		{
 			if (inputMobile.showPicker !== undefined) // Chrome 99+, Safari 16+, Firefox 101+, Edge 99+
 			{
+				inputMobile.focus(); // This is what opens the picker in Safari on touch devices
 				inputMobile.showPicker();
 			}
 			else // This will bring up calendar widget in older browsers on mobile devices - doesn't work on desktop browsers running on hybrid computers (laptops with a touch screen)
@@ -14837,6 +15200,39 @@ Fit.Controls.DatePicker = function(ctlId)
 		}
 	}
 
+	function getDateFromString(value, includeTime) // E.g. "2024-10-19" or "2024-10-19 16:38"
+	{
+		Fit.Validation.ExpectString(value);
+		Fit.Validation.ExpectBoolean(includeTime);
+
+		var date = null;
+
+		if (value !== "")
+		{
+			try
+			{
+				date = Fit.Date.Parse(value, "YYYY-MM-DD" + (value.indexOf(":") !== -1 ? " hh:mm" : ""));
+			}
+			catch (err)
+			{
+			}
+		}
+
+		if (date !== null)
+		{
+			if (includeTime === false)
+			{
+				date.setHours(0);
+				date.setMinutes(0);
+			}
+
+			date.setSeconds(0);
+			date.setMilliseconds(0);
+		}
+
+		return date;
+	}
+
 	function createDatePicker()
 	{
 		var jq = jquery;
@@ -14847,8 +15243,8 @@ Fit.Controls.DatePicker = function(ctlId)
 			showAnim: false,
 			showWeek: weeks, // Buggy - does not work if week starts on sunday: https://bugs.jqueryui.com/ticket/14907
 			//firstDay: 1,
-			changeMonth: true,
-			changeYear: true,
+			changeMonth: navigator.platform.toLowerCase().indexOf("iphone") === -1 ? true : false,	// We are unable to retain focus on iPhone due to this bug: https://bugs.webkit.org/show_bug.cgi?id=281525 - focus is always returned to <body> when a select value is changed
+			changeYear: navigator.platform.toLowerCase().indexOf("iphone") === -1 ? true : false,	// We are unable to retain focus on iPhone due to this bug: https://bugs.webkit.org/show_bug.cgi?id=281525 - focus is always returned to <body> when a select value is changed
 			dateFormat: getJqueryUiDatePickerFormat(me.Format()),
 			defaultDate: null,
 			onChangeMonthYear: function(year, month, dp) // Fires when changing year/month but also when simply opening calendar widget
@@ -14857,7 +15253,14 @@ Fit.Controls.DatePicker = function(ctlId)
 				// widget, which causes its DOM to be removed and replaced.
 				// Focus is later returned to DatePicker, but not in time for
 				// OnFocusOut. Related issue: https://github.com/Jemt/Fit.UI/issues/194
-				input.focus(); // Do not use Focused(true) as it will not re-focus input, since control is already considered focused.
+				if (Fit.Device.OptimizeForTouch === true && me.TriggerIcon() === true)
+				{
+					icon.focus(); // Focusing icon to prevent virtual keyboard from being shown on touch devices
+				}
+				else
+				{
+					input._focus(); // Do not use Focused(true) as it will not re-focus input, since control is already considered focused
+				}
 
 				if (open === true) // Remember which year and month the user navigated to
 				{
@@ -14874,7 +15277,16 @@ Fit.Controls.DatePicker = function(ctlId)
 			onSelect: function(dateText, dp) // Notice: jQuery UI DatePicker no longer fires input.OnChange when OnSelect is registered
 			{
 				startDate = null;
-				input.focus(); // Do not use Focused(true) as it will not re-focus input, since control is already considered focused
+
+				if (Fit.Device.OptimizeForTouch === true && me.TriggerIcon() === true)
+				{
+					icon.focus(); // Focusing icon to prevent virtual keyboard from being shown on touch devices
+				}
+				else
+				{
+					input._focus(); // Do not use Focused(true) as it will not re-focus input, since control is already considered focused
+				}
+
 				input.onchange();
 			},
 			beforeShow: function(elm, dp)
@@ -14926,6 +15338,8 @@ Fit.Controls.DatePicker = function(ctlId)
 					datepicker.datepicker("option", "dateFormat", getJqueryUiDatePickerFormat(me.Format()));
 					datepicker.datepicker("option", "showWeek", weeks);
 					datepicker.datepicker("option", "yearRange", datePickerYears);
+					datepicker.datepicker("option", "showOtherMonths", true);
+					datepicker.datepicker("option", "selectOtherMonths", true);
 				}
 
 				if (me.Value() === "" && datepickerDate !== null) // Apply initial year and month selection
@@ -14969,7 +15383,9 @@ Fit.Controls.DatePicker = function(ctlId)
 
 					me._internal.ExecuteWithNoOnChange(function()
 					{
-						me.Value(val);
+						var middleOfWeekBefore = middleOfWeek;
+						me.Value(val); // Changes middleOfWeek (restored below)
+						middleOfWeek = middleOfWeekBefore;
 					});
 				}
 			},
@@ -14994,7 +15410,7 @@ Fit.Controls.DatePicker = function(ctlId)
 				// with something else on the page.
 				// If the user decides to return focus to the control, it will not cause OnFocus to fire again,
 				// without firing OnBlur in-between, thanks to the 'focused' flag.
-				if (focused === true && Fit.Dom.GetFocused() !== input)
+				if (focused === true && Fit.Dom.GetFocused() !== input && Fit.Dom.GetFocused() !== icon)
 				{
 					me._internal.FireOnBlur();
 				}
@@ -15148,7 +15564,7 @@ Fit.Controls.DatePicker = function(ctlId)
 
 		if (focusFix)
 		{
-			input.focus();
+			input._focus();
 		}
 
 		inputMobile.valueAsDate = date;
@@ -15159,6 +15575,145 @@ Fit.Controls.DatePicker = function(ctlId)
 		}
 	}
 
+	function getMiddleOfWeek(date)
+	{
+		Fit.Validation.ExpectDate(date, true);
+
+		if (!date)
+		{
+			return null;
+		}
+
+		var firstDay = getJqueryDateFormatFromLocale(locale).firstDay; // 0 = sunday, 1 = monday
+		var day = date.getDay(); // 0 = sunday, ... 6 = saturday
+
+		if (firstDay === 0) // Sunday is start of week
+		{
+			// S M T W T F S
+			// 0 1 2 3 4 5 6
+			//       ^
+			var daysFromWednesday = 3 - day; // 3 = wednesday
+
+			var middle = new Date(date.getTime());
+			middle.setDate(date.getDate() + daysFromWednesday);
+			return middle;
+		}
+		else if (firstDay === 1) // Monday is start of week
+		{
+			// Adjust day so it matches a calendar going from monday to sunday
+			// M T W T F S S
+			// 0 1 2 3 4 5 6
+			//     ^
+			day = day === 0 ? 6 : day - 1;		// 0 = monday, 6 = sunday
+			var daysFromWednesday = 2 - day;	// 2 = wednesday
+
+			var middle = new Date(date.getTime());
+			middle.setDate(date.getDate() + daysFromWednesday);
+			return middle;
+		}
+		else if (firstDay === 6) // Saturday is start of week (locale "fa" (Persian), ar-DZ (Arabic - Algeria))
+		{
+			// Adjust day so it matches a calendar going from saturday to friday
+			// S S M T W T F
+			// 0 1 2 3 4 5 6
+			//         ^
+			day = day === 0 ? 1 : day === 6 ? 0 : day + 1;	// 0 = saturday, 6 = friday
+			var daysFromWednesday = 4 - day;				// 4 = wednesday
+
+			var middle = new Date(date.getTime());
+			middle.setDate(date.getDate() + daysFromWednesday);
+			return middle;
+		}
+
+		throw "Unable to determine middle of week - locale with unsupported calendar"; // This should never happen
+	}
+
+	function getStartOfWeek(date)
+	{
+		Fit.Validation.ExpectDate(date);
+
+		var firstDay = getJqueryDateFormatFromLocale(locale).firstDay;
+
+		if (date.getDay() !== firstDay)
+		{
+			var selectedDay = date.getDay(); // 0 = sunday, ... 6 = saturday
+			var daysFromWeekStart = -1;
+
+			if (firstDay === 0) // Sunday is start of week
+			{
+				// S M T W T F S
+				// 0 1 2 3 4 5 6
+				daysFromWeekStart = selectedDay;
+			}
+			else if (firstDay === 1) // Monday is start of week
+			{
+				// M T W T F S S
+				// 1 2 3 4 5 6 0
+				daysFromWeekStart = date.getDay() === 0 ? 6 : date.getDay() - 1;
+			}
+			else if (firstDay === 6) // Saturday is start of week (locale "fa" (Persian), ar-DZ (Arabic - Algeria))
+			{
+				// S S M T W T F
+				// 6 0 1 2 3 4 5
+				daysFromWeekStart = date.getDay() === 6 ? 0 : date.getDay() + 1;
+			}
+
+			if (daysFromWeekStart === -1)
+			{
+				throw "Unable to determine number of days from week start - locale with unsupported calendar"; // This should never happen
+			}
+
+			var weekStart = new Date(date.getTime() - (daysFromWeekStart * (24 * 60 * 60 * 1000)));
+
+			// Prevent adjustment for summer/winter time - keep (restore) time
+			weekStart.setHours(date.getHours());
+			weekStart.setMinutes(date.getMinutes());
+
+			return weekStart;
+		}
+		else
+		{
+			return new Date(date.getTime()); // Return new instance like code above
+		}
+	}
+
+	function selectFirstDayOfWeek(forceDate)
+	{
+		Fit.Validation.ExpectDate(forceDate, true);
+
+		var curDateTime = forceDate || me.Date();
+		var startOfWeek = curDateTime && getStartOfWeek(curDateTime);
+
+		if (curDateTime !== null && curDateTime.getTime() !== startOfWeek.getTime())
+		{
+			var selectWeekStart = function()
+			{
+				var middleOfWeekBefore = middleOfWeek;
+				me.Date(startOfWeek); // Changes middleOfWeek (restored below) - also fires OnChange
+				middleOfWeek = middleOfWeekBefore;
+			};
+
+			if (Fit.Date.Format(startOfWeek, me.Format()) === preVal)
+			{
+				// New date is the same as the one previously selected, meaning user selected a day in the week already
+				// selected, resulting in start of week being selected again - OnChange should not fire in this case.
+				me._internal.ExecuteWithNoOnChange(function()
+				{
+					selectWeekStart();
+				});
+			}
+			else
+			{
+				// A new start of week selected - OnChange must fire
+				selectWeekStart();
+			}
+
+			return true; // Indicate that value was changed
+		}
+
+		return false; // Indicate that no change was made
+	}
+
 	function getLocales()
 	{
 		// List of locales was generated this way:
@@ -15184,7 +15739,8 @@ Fit.Controls.DatePicker = function(ctlId)
 		//    # });
 		// 4) Insert JSON written to console into variable below.
 
-		return {"":"mm/dd/yy","en":"mm/dd/yy","en-US":"mm/dd/yy","da":"dd-mm-yy","af":"dd/mm/yy","ar-DZ":"dd/mm/yy","ar":"dd/mm/yy","az":"dd.mm.yy","be":"dd.mm.yy","bg":"dd.mm.yy","bs":"dd.mm.yy","ca":"dd/mm/yy","cs":"dd.mm.yy","cy-GB":"dd/mm/yy","de":"dd.mm.yy","el":"dd/mm/yy","en-AU":"dd/mm/yy","en-GB":"dd/mm/yy","en-NZ":"dd/mm/yy","eo":"dd/mm/yy","es":"dd/mm/yy","et":"dd.mm.yy","eu":"yy-mm-dd","fa":"yy/mm/dd","fi":"d.m.yy","fo":"dd-mm-yy","fr-CA":"yy-mm-dd","fr-CH":"dd.mm.yy","fr":"dd/mm/yy","gl":"dd/mm/yy","he":"dd/mm/yy","hi":"dd/mm/yy","hr":"dd.mm.yy.","hu":"yy.mm.dd.","hy":"dd.mm.yy","id":"dd/mm/yy","is":"dd.mm.yy","it-CH":"dd.mm.yy","it":"dd/mm/yy","ja":"yy/mm/dd","ka":"dd-mm-yy","kk":"dd.mm.yy","km":"dd-mm-yy","ko":"yy. m. d.","ky":"dd.mm.yy","lb":"dd.mm.yy","lt":"yy-mm-dd","lv":"dd.mm.yy","mk":"dd.mm.yy","ml":"dd/mm/yy","ms":"dd/mm/yy","nb":"dd.mm.yy","nl-BE":"dd/mm/yy","nl":"dd-mm-yy","nn":"dd.mm.yy","no":"dd.mm.yy","pl":"dd.mm.yy","pt-BR":"dd/mm/yy","pt":"dd/mm/yy","rm":"dd/mm/yy","ro":"dd.mm.yy","ru":"dd.mm.yy","sk":"dd.mm.yy","sl":"dd.mm.yy","sq":"dd.mm.yy","sr":"dd.mm.yy","sr-SR":"dd.mm.yy","sv":"yy-mm-dd","ta":"dd/mm/yy","th":"dd/mm/yy","tj":"dd.mm.yy","tr":"dd.mm.yy","uk":"dd.mm.yy","vi":"dd/mm/yy","zh-CN":"yy-mm-dd","zh-HK":"dd-mm-yy","zh-TW":"yy/mm/dd"};
+		//return {"":"mm/dd/yy","en":"mm/dd/yy","en-US":"mm/dd/yy","da":"dd-mm-yy","af":"dd/mm/yy","ar-DZ":"dd/mm/yy","ar":"dd/mm/yy","az":"dd.mm.yy","be":"dd.mm.yy","bg":"dd.mm.yy","bs":"dd.mm.yy","ca":"dd/mm/yy","cs":"dd.mm.yy","cy-GB":"dd/mm/yy","de":"dd.mm.yy","el":"dd/mm/yy","en-AU":"dd/mm/yy","en-GB":"dd/mm/yy","en-NZ":"dd/mm/yy","eo":"dd/mm/yy","es":"dd/mm/yy","et":"dd.mm.yy","eu":"yy-mm-dd","fa":"yy/mm/dd","fi":"d.m.yy","fo":"dd-mm-yy","fr-CA":"yy-mm-dd","fr-CH":"dd.mm.yy","fr":"dd/mm/yy","gl":"dd/mm/yy","he":"dd/mm/yy","hi":"dd/mm/yy","hr":"dd.mm.yy.","hu":"yy.mm.dd.","hy":"dd.mm.yy","id":"dd/mm/yy","is":"dd.mm.yy","it-CH":"dd.mm.yy","it":"dd/mm/yy","ja":"yy/mm/dd","ka":"dd-mm-yy","kk":"dd.mm.yy","km":"dd-mm-yy","ko":"yy. m. d.","ky":"dd.mm.yy","lb":"dd.mm.yy","lt":"yy-mm-dd","lv":"dd.mm.yy","mk":"dd.mm.yy","ml":"dd/mm/yy","ms":"dd/mm/yy","nb":"dd.mm.yy","nl-BE":"dd/mm/yy","nl":"dd-mm-yy","nn":"dd.mm.yy","no":"dd.mm.yy","pl":"dd.mm.yy","pt-BR":"dd/mm/yy","pt":"dd/mm/yy","rm":"dd/mm/yy","ro":"dd.mm.yy","ru":"dd.mm.yy","sk":"dd.mm.yy","sl":"dd.mm.yy","sq":"dd.mm.yy","sr":"dd.mm.yy","sr-SR":"dd.mm.yy","sv":"yy-mm-dd","ta":"dd/mm/yy","th":"dd/mm/yy","tj":"dd.mm.yy","tr":"dd.mm.yy","uk":"dd.mm.yy","vi":"dd/mm/yy","zh-CN":"yy-mm-dd","zh-HK":"dd-mm-yy","zh-TW":"yy/mm/dd"};
+		return {"":{"format":"mm/dd/yy","firstDay":0},"en":{"format":"mm/dd/yy","firstDay":0},"en-US":{"format":"mm/dd/yy","firstDay":0},"af":{"format":"dd/mm/yy","firstDay":1},"ar-DZ":{"format":"dd/mm/yy","firstDay":6},"ar":{"format":"dd/mm/yy","firstDay":0},"az":{"format":"dd.mm.yy","firstDay":1},"be":{"format":"dd.mm.yy","firstDay":1},"bg":{"format":"dd.mm.yy","firstDay":1},"bs":{"format":"dd.mm.yy","firstDay":1},"ca":{"format":"dd/mm/yy","firstDay":1},"cs":{"format":"dd.mm.yy","firstDay":1},"cy-GB":{"format":"dd/mm/yy","firstDay":1},"da":{"format":"dd-mm-yy","firstDay":1},"de":{"format":"dd.mm.yy","firstDay":1},"el":{"format":"dd/mm/yy","firstDay":1},"en-AU":{"format":"dd/mm/yy","firstDay":1},"en-GB":{"format":"dd/mm/yy","firstDay":1},"en-NZ":{"format":"dd/mm/yy","firstDay":1},"eo":{"format":"dd/mm/yy","firstDay":0},"es":{"format":"dd/mm/yy","firstDay":1},"et":{"format":"dd.mm.yy","firstDay":1},"eu":{"format":"yy-mm-dd","firstDay":1},"fa":{"format":"yy/mm/dd","firstDay":6},"fi":{"format":"d.m.yy","firstDay":1},"fo":{"format":"dd-mm-yy","firstDay":1},"fr-CA":{"format":"yy-mm-dd","firstDay":0},"fr-CH":{"format":"dd.mm.yy","firstDay":1},"fr":{"format":"dd/mm/yy","firstDay":1},"gl":{"format":"dd/mm/yy","firstDay":1},"he":{"format":"dd/mm/yy","firstDay":0},"hi":{"format":"dd/mm/yy","firstDay":1},"hr":{"format":"dd.mm.yy.","firstDay":1},"hu":{"format":"yy.mm.dd.","firstDay":1},"hy":{"format":"dd.mm.yy","firstDay":1},"id":{"format":"dd/mm/yy","firstDay":0},"is":{"format":"dd.mm.yy","firstDay":0},"it-CH":{"format":"dd.mm.yy","firstDay":1},"it":{"format":"dd/mm/yy","firstDay":1},"ja":{"format":"yy/mm/dd","firstDay":0},"ka":{"format":"dd-mm-yy","firstDay":1},"kk":{"format":"dd.mm.yy","firstDay":1},"km":{"format":"dd-mm-yy","firstDay":1},"ko":{"format":"yy. m. d.","firstDay":0},"ky":{"format":"dd.mm.yy","firstDay":1},"lb":{"format":"dd.mm.yy","firstDay":1},"lt":{"format":"yy-mm-dd","firstDay":1},"lv":{"format":"dd.mm.yy","firstDay":1},"mk":{"format":"dd.mm.yy","firstDay":1},"ml":{"format":"dd/mm/yy","firstDay":1},"ms":{"format":"dd/mm/yy","firstDay":0},"nb":{"format":"dd.mm.yy","firstDay":1},"nl-BE":{"format":"dd/mm/yy","firstDay":1},"nl":{"format":"dd-mm-yy","firstDay":1},"nn":{"format":"dd.mm.yy","firstDay":1},"no":{"format":"dd.mm.yy","firstDay":1},"pl":{"format":"dd.mm.yy","firstDay":1},"pt-BR":{"format":"dd/mm/yy","firstDay":0},"pt":{"format":"dd/mm/yy","firstDay":0},"rm":{"format":"dd/mm/yy","firstDay":1},"ro":{"format":"dd.mm.yy","firstDay":1},"ru":{"format":"dd.mm.yy","firstDay":1},"sk":{"format":"dd.mm.yy","firstDay":1},"sl":{"format":"dd.mm.yy","firstDay":1},"sq":{"format":"dd.mm.yy","firstDay":1},"sr-SR":{"format":"dd.mm.yy","firstDay":1},"sr":{"format":"dd.mm.yy","firstDay":1},"sv":{"format":"yy-mm-dd","firstDay":1},"ta":{"format":"dd/mm/yy","firstDay":1},"th":{"format":"dd/mm/yy","firstDay":0},"tj":{"format":"dd.mm.yy","firstDay":1},"tr":{"format":"dd.mm.yy","firstDay":1},"uk":{"format":"dd.mm.yy","firstDay":1},"vi":{"format":"dd/mm/yy","firstDay":0},"zh-CN":{"format":"yy-mm-dd","firstDay":1},"zh-HK":{"format":"dd-mm-yy","firstDay":0},"zh-TW":{"format":"yy/mm/dd","firstDay":1}};
 	}
 
 	function getDatePlaceholder()
@@ -15201,11 +15757,13 @@ Fit.Controls.DatePicker = function(ctlId)
 	{
 		Fit.Validation.ExpectString(val);
 
-		var newFormat = getJqueryDateFormatFromLocale(val); // Null if locale does not exist
+		var loc = getJqueryDateFormatFromLocale(val); // Null if locale does not exist
 
-		if (newFormat === null)
+		if (loc === null)
 			Fit.Validation.ThrowError("Unknown locale '" + val + "'");
 
+		var newFormat = loc.format;
+
 		var wasOpen = open;
 
 		if (wasOpen === true)
@@ -15326,6 +15884,7 @@ Fit.Controls.DatePicker = function(ctlId)
 
 Fit._internal.Controls.DatePicker = {};
 
+Fit._internal.Controls.DatePicker.UseNativePickerOnTouch = false;
 /// <container name="Fit.Controls.Dialog" extends="Fit.Controls.Component">
 /// 	Simple Dialog control with support for Fit.UI buttons.
 /// </container>