Merge pull request #1738 from IgniteUI/dpetev/datepicker-1733-17.2

Datepicker formating/calendar sync 17.2
IgniteUI · Jun 11, 2018 · d71fa1b · d71fa1b
2 parents e1f033a + 97611e0
commit d71fa1b
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 3 deletions.
diff --git a/src/js/modules/infragistics.ui.editors.js b/src/js/modules/infragistics.ui.editors.js
@@ -10875,14 +10875,18 @@
 		_listMouseDownHandler: function () { // igDatePicker
 		},
 		_updateDropdownSelection: function () { //igDatePicker
-			var pickerInst, cursorPosition,
+			var pickerInst, cursorPosition, parsedDate,
 				val = this._editorInput.val();
 
 			// D.P. 19th Dec 2017 #1453 Update the `datepicker` selection if the input mask if fulfilled
 			if (this._pickerOpen && this._validateRequiredPrompts(val)) {
 				cursorPosition = this._getCursorPosition();
 				pickerInst = $.data( this._editorInput[ 0 ], "datepicker" );
-				this._editorInput.datepicker("setDate", this._valueFromText(val));
+				parsedDate = this._parseDateFromMaskedValue(val);
+				if (this.options.displayTimeOffset !== null) {
+					parsedDate = this._getDateOffset(parsedDate);
+				}
+				this._editorInput.datepicker("setDate", parsedDate);
 
 				// restore input after picker updates input:
 				this._editorInput.val(val);
@@ -10981,6 +10985,7 @@
 					// D.P. 19th Dec 2017 #1453 - Entered date is converted to today's date when pressing the Enter key
 					// Double onSelect bug + getDate cause a parse on the text we already formatted, setting lastVal skips that:
 					inst.lastVal = self._getEditModeValue();
+					self._editorInput.val(inst.lastVal);
 					self._triggerItemSelected.call(self,
 						inst.dpDiv.find(".ui-datepicker-calendar>tbody>tr>td .ui-state-hover"),
 							dateFromPicker);

diff --git a/tests/unit/editors/DatePickerBugs/tests.html b/tests/unit/editors/DatePickerBugs/tests.html
@@ -231,7 +231,7 @@
 					});
 					$("#211360Editor1").igDatePicker("dropDownButton").click();
 					$("#211360Editor1").one("igdatepickertextchanged", function (evt, ui) {
-						equal(ui.text, getMMDDYYYY(new Date()), "The text should be " + getMMDDYYYY(new Date()) + " Real Value: " + ui.text);
+						equal(ui.text, getDDmmYYYY(new Date()), "The text should be " + getDDmmYYYY(new Date()) + " Real Value: " + ui.text);
 					});
 					calendar = $("#211360Editor1").igDatePicker("getCalendar");
 					$(calendar).find(".ui-datepicker-today").find("a").click();
@@ -502,6 +502,91 @@
 					throw er;
 				});
 			});
+
+			testId = "Issue 1453 pt2 - Enter date w/ format and displayModeText dataMode";
+			test(testId, function (assert) {
+				assert.expect(5);
+				var done = assert.async(),
+					today = target = new Date(),
+					targetString, targetKeys, tomorrow = true,
+					todayString = getDDmmYYYY(today, "-"),
+					$editor = $('<input/>').appendTo("#qunit-fixture2").igDatePicker({
+						dateInputFormat: "dd-MM-yyyy",
+						dataMode: "displayModeText"
+					}),
+					$calendar = $editor.igDatePicker("getCalendar");
+
+				targetKeys = todayString.replace(/-/g, "");
+
+				$editor.igDatePicker("field").focus();
+				$editor.igDatePicker("showDropDown");
+
+				$.ig.TestUtil.wait(400).then(function () {
+					// picker opens with today as default
+					strictEqual($calendar.find(".ui-datepicker-current-day").length, 0, "Calendar should have no initial selection");
+					//type in the date +/- a day, control check what's typed:
+					$.ig.TestUtil.type(targetKeys, $editor.igDatePicker("field"));
+					equal($editor.igDatePicker("field").val(), todayString, "Typed text should match");
+					equal($calendar.find(".ui-datepicker-current-day").text(), target.getDate(), "Calendar selection should be updated with typed in date");
+
+					$.ig.TestUtil.keyInteraction(13, $editor.igDatePicker("field"));
+					equal($editor.igDatePicker("field").val(), todayString, "Typed text should remain after enter");
+					equal($editor.igDatePicker("value"), todayString, "Value should match typed selection");
+
+					done();
+				}).catch(function (er) {
+					assert.pushResult({ result: false, message: er.message });
+					done();
+					throw er;
+				});
+			});
+
+
+			testId = "Issue 1733 - igDatePicker throws error, when selecting with displayModeText dataMode";
+			test(testId, function (assert) {
+				assert.expect(4);
+				var done = assert.async(),
+					value = new Date(),
+					todayString, targetString,
+					$editor = $('<input/>').appendTo("#qunit-fixture2").igDatePicker({
+						dateInputFormat: "yyyy-MM-dd",
+						dataMode: "displayModeText"
+					}),
+					$calendar = $editor.igDatePicker("getCalendar");
+
+				value = new Date(value.getFullYear(), value.getMonth(), value.getDate());
+				todayString = getDDmmYYYY(value, "-").split("-").reverse().join("-");
+
+
+				$editor.igDatePicker("field").focus();
+				$editor.igDatePicker("showDropDown");
+
+				$.ig.TestUtil.wait(400).then(function () {
+					// select today
+					$calendar.find(".ui-datepicker-today").find("a").click();
+					assert.equal($editor.val(), todayString, "Editor display text not updated with picked value");
+					assert.equal($editor.igDatePicker("value"), todayString, "Editor value not updated with picked one");
+
+					$editor.igDatePicker("showDropDown");
+					return $.ig.TestUtil.wait(400);
+					done();
+				})
+				.then(function () {
+					// select 15th or 16th depending on date
+					value.setDate(value.getDate() === 15 ? 16 : 15);
+					targetString = getDDmmYYYY(value, "-").split("-").reverse().join("-");
+
+					$calendar.find(".ui-datepicker-today").find("a").click();
+					assert.equal($editor.val(), todayString, "Editor display text not updated with picked value");
+					assert.equal($editor.igDatePicker("value"), todayString, "Editor value not updated with picked one");
+					done();
+				})	
+				.catch(function (er) {
+					assert.pushResult({ result: false, message: er.message });
+					done();
+					throw er;
+				});
+			});
 		});
 
 		function getDDmmYYYYHHSS(date) {