Replace XWiki date picker with html date input

src/script/view/nodeMenu.js

@@ -94,6 +94,12 @@ var NodeMenu = Class.create({
         insertLocation.insert(_this._generateField[d.type].call(_this, d));
       }
     });
+
+    // Date picker event queues used to fire only the last on change event after user is inactive for X secs.
+    this._datepickerEventQueue = {
+      'date_of_birth': [],
+      'date_of_death': [],
+    }
 
     // Insert in document
     this.hide();
@@ -103,6 +109,8 @@ var NodeMenu = Class.create({
 
     // Attach pickers
     // date
+
+    // Original XWiki control was replaced with html input type=date
     var crtYear = new Date().getFullYear();
     window.dateTimePicker = new XWiki.widgets.DateTimePicker({
       year_range: [crtYear - 99, crtYear + 1],
@@ -315,6 +323,21 @@ var NodeMenu = Class.create({
     return result;
   },
 
+  _handleDatePickerChangeEvent : function (field, event, fireEventName) {
+    var _this = this;
+    // Add event to a datepicker queue (date of birth and date of death events are processed separately).
+    _this._datepickerEventQueue[field.name].push(event);
+    var eventNum = _this._datepickerEventQueue[field.name].length;
+    // Wait for X sec and trigger update if no new events were added to the queue.
+    setTimeout(function(eventNum) {
+      if (_this._datepickerEventQueue[field.name].length == eventNum) {
+        document.fire(fireEventName, _this._datepickerEventQueue[field.name].pop());
+        _this._datepickerEventQueue[field.name] = [];
+        field.fire('pedigree:change');
+      }
+    }, 2000, eventNum);
+  },
+
   _attachFieldEventListeners : function (field, eventNames, values) {
     var _this = this;
     eventNames.each(function(eventName) {
@@ -337,14 +360,24 @@ var NodeMenu = Class.create({
           var properties = {};
           properties[method] = _this.fieldMap[field.name].crtValue;
           var event = { 'nodeID': target.getID(), 'properties': properties };
-          document.fire('pedigree:node:setproperty', event);
+          if (field.name == 'date_of_birth' || field.name == 'date_of_death') {
+            _this._handleDatePickerChangeEvent(field, event, 'pedigree:node:setproperty');
+          } else {
+            document.fire('pedigree:node:setproperty', event);
+          }
         } else {
           var properties = {};
           properties[method] = _this.fieldMap[field.name].crtValue;
           var event = { 'nodeID': target.getID(), 'modifications': properties };
-          document.fire('pedigree:node:modify', event);
+          if (field.name == 'date_of_birth' || field.name == 'date_of_death') {
+            _this._handleDatePickerChangeEvent(field, event, 'pedigree:node:modify');
+          } else {
+            document.fire('pedigree:node:modify', event);
+          }
+        }
+        if (field.name != 'date_of_birth' && field.name != 'date_of_death') {
+          field.fire('pedigree:change');
         }
-        field.fire('pedigree:change');
       });
     });
   },
@@ -423,12 +456,18 @@ var NodeMenu = Class.create({
     },
     'date-picker' : function (data) {
       var result = this._generateEmptyField(data);
-      var datePicker = new Element('input', {type: 'text', 'class': 'xwiki-date', name: data.name, 'title': data.format, alt : '' });
+      var datePicker = document.createElement("INPUT");
+      datePicker.setAttribute("type", "date");
+      datePicker.setAttribute("name", data.name);
       result.insert(datePicker);
       datePicker._getValue = function() {
-        return [this.alt && Date.parseISO_8601(this.alt)];
+        var date = '';
+        if (this.value) {
+          date = new Date(this.value + 'T00:00:00');
+        }
+        return [date];
       }.bind(datePicker);
-      this._attachFieldEventListeners(datePicker, ['xwiki:date:changed']);
+      this._attachFieldEventListeners(datePicker, ['change']);
       return result;
     },
     'disease-picker' : function (data) {
@@ -676,13 +715,22 @@ var NodeMenu = Class.create({
         target.value = value;
       }
     },
+    /*
+    // Original XWiki control was replaced with html input type=date
     'date-picker' : function (container, value) {
       var target = container.down('input[type=text].xwiki-date');
       if (target) {
         target.value = value && value.toFormattedString({'format_mask' : target.title}) || '';
         target.alt = value && value.toISO8601() || '';
       }
     },
+    */
+    'date-picker' : function (container, value) {
+      var target = container.down('input[type=date]');
+      if (target) {
+        target.value = value && value.toISO8601().split('T')[0] || '';
+      }
+    },
     'disease-picker' : function (container, values) {
       var _this = this;
       var target = container.down('input[type=text].suggest-omim');

src/script/view/person.js

@@ -73,6 +73,26 @@ var Person = Class.create(AbstractPerson, {
     return new PersonVisuals(this, x, y);
   },
 
+  /**
+     * Returns date as day/month/year string
+     *
+     * @method _getDateDMY
+     * @param {Date} dateObj Date object
+     * @return {String}
+     */
+  _getDateDMY: function(dateObj) {
+    var day = dateObj.getDate();
+    if (day < 10) {
+      day = '0' + day
+    }
+    var month = dateObj.getMonth() + 1; //months from 1-12
+    if (month < 10) {
+      month = '0' + month
+    }
+    var year = dateObj.getFullYear();
+    return day + "/" + month + "/" + year;
+  },
+
   /**
      * Returns True if this node is the proband (i.e. the main patient)
      *