fix(calendar): trigger native change event on select

The native change event should be triggered whenever a date is selected from the picker and the input field blurs.
Currently it is only triggered when the dates input field has been changed manually and the field blurs.

I adopted the same method for this as in checkbox or dropdown

Author: lubber-de

src/definitions/modules/calendar.js

@@ -43,7 +43,8 @@ $.fn.calendar = function(parameters) {
       '20': {'row': 3, 'column': 1 },
       '30': {'row': 2, 'column': 1 }
     },
-    numberText = ['','one','two','three','four','five','six','seven','eight']
+    numberText = ['','one','two','three','four','five','six','seven','eight'],
+    selectionComplete = false
   ;
 
   $allModules
@@ -211,6 +212,20 @@ $.fn.calendar = function(parameters) {
           }
         },
 
+        trigger: {
+          change: function() {
+            var
+                inputElement = $input[0]
+            ;
+            if(inputElement) {
+              var events = document.createEvent('HTMLEvents');
+              module.verbose('Triggering native change event');
+              events.initEvent('change', true, false);
+              inputElement.dispatchEvent(events);
+            }
+          }
+        },
+
         create: {
           calendar: function () {
             var i, r, c, p, row, cell, pageGrid;
@@ -620,6 +635,10 @@ $.fn.calendar = function(parameters) {
               var text = formatter.datetime(date, settings);
               $input.val(text);
             }
+            if(selectionComplete){
+              module.trigger.change();
+              selectionComplete = false;
+            }
           }
         },
 
@@ -845,15 +864,18 @@ $.fn.calendar = function(parameters) {
             (settings.type === 'year' && mode === 'year');
           if (complete) {
             var canceled = module.set.date(date) === false;
-            if (!canceled && settings.closable) {
-              module.popup('hide');
-              //if this is a range calendar, focus the container or input. This will open the popup from its event listeners.
-              var endModule = module.get.calendarModule(settings.endCalendar);
-              if (endModule) {
-                if (endModule.setting('on') !== 'focus') {
-                  endModule.popup('show');
+            if (!canceled) {
+              selectionComplete = true;
+              if(settings.closable) {
+                module.popup('hide');
+                //if this is a range calendar, focus the container or input. This will open the popup from its event listeners.
+                var endModule = module.get.calendarModule(settings.endCalendar);
+                if (endModule) {
+                  if (endModule.setting('on') !== 'focus') {
+                    endModule.popup('show');
+                  }
+                  endModule.focus();
                 }
-                endModule.focus();
               }
             }
           } else {

src/definitions/modules/checkbox.js

@@ -556,10 +556,10 @@ $.fn.checkbox = function(parameters) {
         trigger: {
           change: function() {
             var
-              events       = document.createEvent('HTMLEvents'),
               inputElement = $input[0]
             ;
             if(inputElement) {
+              var events = document.createEvent('HTMLEvents');
               module.verbose('Triggering native change event');
               events.initEvent('change', true, false);
               inputElement.dispatchEvent(events);

src/definitions/modules/dropdown.js

@@ -1637,10 +1637,10 @@ $.fn.dropdown = function(parameters) {
         trigger: {
           change: function() {
             var
-              events       = document.createEvent('HTMLEvents'),
               inputElement = $input[0]
             ;
             if(inputElement) {
+              var events = document.createEvent('HTMLEvents');
               module.verbose('Triggering native change event');
               events.initEvent('change', true, false);
               inputElement.dispatchEvent(events);