Use Javascript native Date objects instead of ISO date strings

Author: soulim

addon/components/datepicker-support.js

@@ -4,12 +4,7 @@ export default Ember.Mixin.create({
   value: null,
 
   setupBootstrapDatepicker: function() {
-    var self = this,
-        element = this.$(),
-        value = this.get('value'),
-        dates = [];
-
-    element.
+    this.$().
       datepicker({
         autoclose: this.get('autoclose'),
         calendarWeeks: this.get('calendarWeeks'),
@@ -32,73 +27,57 @@ export default Ember.Mixin.create({
       }).
       on('changeDate', function(event) {
         Ember.run(function() {
-          self.didChangeDate(event);
-        });
-      });
-
-    if (value) {
-      if (this.get('multidate')) {
-        // split datesIsoString by multidate separator
-        var multidateSeparator = this.get('multidateSeparator') || ',';
-        var isoDates = value.split(multidateSeparator);
+          this.didChangeDate(event);
+        }.bind(this));
+      }.bind(this));
 
-        // generate array of date objecs
-        dates = isoDates.map(function(date) {
-          return self._resetTime(new Date(date));
-        });
-      }
-      else {
-        dates = [self._resetTime(new Date(value))];
-      }
-      element.datepicker.
-              apply(element, Array.prototype.concat.call(['update'], dates));
-    }
+    this._updateDatepicker();
   }.on('didInsertElement'),
 
   teardownBootstrapDatepicker: function() {
     this.$().datepicker('remove');
   }.on('willDestroyElement'),
 
   didChangeDate: function(event) {
-    var isoDate = null;
+    var value = null;
 
     if (event.date) {
       if (this.get('multidate')) {
-         // set value to array if multidate
-         isoDate = this.$().datepicker('getDates').map(function(date) {
-           return date.toISOString();
-         });
-      }
-      else {
-         isoDate = this.$().datepicker('getDate').toISOString();
+        value = this.$().datepicker('getDates');
+      } else {
+        value = this.$().datepicker('getDate');
       }
     }
-    this.set('value', isoDate);
+
+    this.set('value', value);
   },
 
   didChangeValue: function() {
-    var self = this,
-        element = this.$(),
+    this._updateDatepicker();
+  }.observes('value'),
+
+  _updateDatepicker: function() {
+    var element = this.$(),
         value = this.get('value'),
         dates = [];
-    
-    // If value is undefined or null, we don't want bootstrap-datepicker to 
-    // display 1970-01-01. We want a blank value. 
-    if (value) {
-      if (Ember.isArray(value)) {
-        dates = value.map(function(date) {
-          return self._resetTime(new Date(date));
-        });
-      } else {
-        dates = [self._resetTime(new Date(value))];
-      }
-    } else {
-      dates = [null];
+
+    switch (Ember.typeOf(value)) {
+      case 'array':
+        dates = value;
+        break;
+      case 'date':
+        dates = [value];
+        break;
+      default:
+        dates = [null];
     }
-    
-    element.datepicker.
-            apply(element, Array.prototype.concat.call(['update'], dates));
-  }.observes('value'),
+    dates = dates.map(function(date) {
+      return (Ember.isNone(date)) ? null : this._resetTime(date);
+    }.bind(this));
+
+    element.datepicker
+           .apply(element, Array.prototype.concat.call(['update'], dates));
+  },
 
   // HACK: Have to reset time to 00:00:00 because of the bug in
   //       bootstrap-datepicker
@@ -107,6 +86,7 @@ export default Ember.Mixin.create({
     date.setHours(0);
     date.setMinutes(0);
     date.setSeconds(0);
+    date.setMilliseconds(0);
 
     return date;
   }

tests/unit/components/bootstrap-datepicker-test.js

@@ -24,7 +24,7 @@ test('should display date with default format when no format is set', function()
   expect(1);
 
   var component = this.subject({
-    value: '2014-12-31T00:00:00.000Z'
+    value: new Date(2014, 11, 31)
   });
 
   equal(this.$().val(), '12/31/2014');
@@ -34,7 +34,7 @@ test('should display date with custom format when format is set', function(){
   expect(1);
 
   var component = this.subject({
-    value: '2014-12-31T00:00:00.000Z',
+    value: new Date(2014, 11, 31),
     format: 'dd.M.yy'
   });
 
@@ -43,9 +43,9 @@ test('should display date with custom format when format is set', function(){
 
 test('should set dates provided by value (multidate, default multidateSeparator)', function(){
   expect(2);
-  
+
   var component = this.subject({
-    value: '2015-01-13T00:00:00.000Z,2015-01-07T00:00:00.000Z,2015-01-15T00:00:00.000Z',
+    value: [new Date(2015, 0, 13), new Date(2015, 0, 7), new Date(2015, 0, 15)],
     multidate: true
   });
 
@@ -57,7 +57,7 @@ test('should set dates provided by value (multidate, multidateSeparator provided
   expect(2);
 
   var component = this.subject({
-    value: '2015-01-13T00:00:00.000Z;2015-01-07T00:00:00.000Z;2015-01-15T00:00:00.000Z',
+    value: [new Date(2015, 0, 13), new Date(2015, 0, 7), new Date(2015, 0, 15)],
     multidate: true,
     multidateSeparator: ';'
   });