LPS-84020 Fix datepicker behaviour when it is empty

stian-sigvartsen · Aug 24, 2018 · 663c87c · 663c87c
1 parent 72477cf
commit 663c87c
Showing 1 changed file with 55 additions and 2 deletions.
diff --git a/...mic-data-mapping-form-field-type/src/main/resources/META-INF/resources/date/date_field.js b/...mic-data-mapping-form-field-type/src/main/resources/META-INF/resources/date/date_field.js
@@ -108,6 +108,7 @@ AUI.add(
 							if (calendar.get('boundingBox').contains(node) || popover.get('visible')) {
 								hasFocus = true;
 							}
+
 						}
 
 						return hasFocus;
@@ -128,7 +129,7 @@ AUI.add(
 
 						var element = instance.getTriggerNode().getDOM();
 
-						DDMDate.vanillaTextMask(
+						instance.dateMask = DDMDate.vanillaTextMask(
 							{
 								inputElement: element,
 								mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
@@ -145,6 +146,9 @@ AUI.add(
 								after: {
 									selectionChange: A.bind('_afterSelectionChange', instance)
 								},
+								on: {
+									selectionChange: A.bind('_onSelectionChange', instance)
+								},
 								mask: instance.get('mask'),
 								popover: {
 									zIndex: Liferay.zIndex.TOOLTIP
@@ -153,6 +157,8 @@ AUI.add(
 							}
 						);
 
+						instance.datePicker.getCalendar().on('dateClick', instance._onDateClick.bind(this));
+
 						return instance;
 					},
 
@@ -180,11 +186,49 @@ AUI.add(
 						formGroup.append(container.one('.form-feedback-item'));
 					},
 
-					_afterSelectionChange: function(event) {
+					_getDatePlaceholder: function() {
 						var instance = this;
 
+						if (instance.dateMask) {
+							return instance.dateMask.textMaskInputElement.state.previousPlaceholder;
+						}
+					},
+
+					_onSelectionChange: function(event) {
+						var instance = this;
+
+						if (!instance.getTriggerNode().val() || (instance.getTriggerNode().val() == instance._getDatePlaceholder())) {
+							instance.invalidValue = true;
+						}
+					},
+
+					_afterSelectionChange: function(event) {
+						var instance = this;
 						var date = event.newSelection;
 
+						instance.dateValue = instance.getTriggerNode().val()
+
+						if (instance.invalidValue) {
+							return instance.clearDateInputValue();
+						}
+
+						return instance._setDatePickerValue(date);
+					},
+
+					clearDateInputValue: function() {
+						instance = this;
+
+						var placeholder = instance._getDatePlaceholder();
+
+						instance.getTriggerNode().val('');
+						instance.getTriggerNode().setAttribute('placeholder', placeholder)
+						instance.setValue('');
+						instance.invalidValue = false;
+					},
+
+					_setDatePickerValue: function(date) {
+						var instance = this;
+
 						if (isArray(date) && date.length) {
 							date = date[0];
 						}
@@ -194,6 +238,8 @@ AUI.add(
 						instance.validate();
 
 						instance._fireStartedFillingEvent();
+
+						instance.actionByCalendar = false;
 					},
 
 					_onBlurInput: function() {
@@ -224,6 +270,13 @@ AUI.add(
 						instance.getTriggerNode().focus();
 
 						datePicker.show();
+					},
+
+					_onDateClick: function(event) {
+						var instance = this;
+
+						instance.getTriggerNode().val(instance.dateValue);
+						instance._setDatePickerValue(event.date);
 					}
 				}
 			}