Merge pull request #119 from staskij/fix-onChange-called-by-didReceiv…

…eAttrs

didReceiveAttrs does not trigger onChange

README.md

@@ -46,7 +46,7 @@ minuteIncrement=5
 mode='single'
 nextArrow='>'
 noCalendar=false
-onChange=(action (mut dateValue))
+onChange=(action (mut dateValues))
 onClose='doSomeStuffOnClose'
 onOpen='doSomeStuffOnOpen'
 onReady='doSomeStuffOnReady'
@@ -57,15 +57,26 @@ static=false
 timeFormat='H:i'
 time_24hr=false
 utc=false
-value=(readonly dateValue)
+value=(readonly dateValues)
 wrap=false}}
 ```
 
 *(`onChange` is the only required option, but you can pass null if you do not care about it. All other options are displayed, but they have defaults and you only need to pass what you need)
 
-**Note:** You should pass your value with the `readonly` helper, and you should only update your value selected in the `onChange` action. If you just want it to be set to the new `dateObject`, you can use `(action (mut dateValue))` like the example above.
+**Note:** You should pass your value with the `readonly` helper, and you should only update your value selected in the `onChange` action. 
+
+Value property accepts:
+  * A single `dateObject`
+  * A single `string` containing a date formatted accordingly to `dateFormat`
+  * An array of `dateObject`
+  * An array of `string` containing dates formatted accordingly to `dateFormat`
+
+`onChange`, `onClose`, `onOpen`, `onReady` receive 3 parameters:
+  * An array of `dateObjects` 
+  * A string formatted accordingly to `dateFormat` representing the last selected date
+  * The `Flatpickr` instance
 
-Whenever a new date is selected, the action `onChange` will be fired, and passed the new `dateObject` and `dateString` to that action. This allows you to pass whatever action you may want in to happen on change.
+Whenever a new date is selected, the action `onChange` will be fired: if you just want the event to set the array of selected `dateObject`, you can use `(action (mut dateValues))` like the example above. Otherwise you should implement you own `onChange` action.
 
 ## Themes
 

tests/integration/components/ember-flatpickr-test.js

@@ -144,3 +144,184 @@ test('locale works correctly', function(assert) {
 
   assert.equal($('.flatpickr-current-month .cur-month').text().trim(), 'Décembre', 'French locale applied successfully');
 });
+
+test('onChange triggers value change only once', function(assert) {
+  assert.expect(3);
+
+  let originalPosition = '1';
+  let originalDate = '2080-12-01T20:00:00.000Z';
+  let newPosition = '5';
+
+  this.on('onChange', (selectedDates) => {
+    assert.ok(selectedDates[0].toISOString(), 'onChange action was executed');
+
+    this.set('dateValue', selectedDates[0]);
+  });
+
+  this.set('dateValue', originalDate);
+
+  this.render(
+    hbs`{{ember-flatpickr
+      onChange="onChange"
+      placeholder="Pick date"
+      value=(readonly dateValue)
+      }}`);
+
+  run(() => {
+    assert.equal($('.flatpickr-days .flatpickr-day.selected').text(), originalPosition, 'initial selected date text');
+
+    $('.flatpickr-input')[0].dispatchEvent(new Event('focus'));
+    $('.flatpickr-days .flatpickr-day').get(newPosition - 1).click();
+
+    assert.equal($('.flatpickr-days .flatpickr-day.selected').text(), newPosition, 'selected changes with dateValue');
+  });
+
+});
+
+test('onChange gets called with the correct parameters', function(assert) {
+  let originalPosition = '1';
+  let originalDate = '2080-12-01T20:00:00.000Z';
+  let newPosition = '5';
+  let dateFormat = 'Y-Y-m-d';
+  let newFormattedDate = '2080-2080-12-05';
+
+  this.on('onChange', (selectedDates, dateStr, instance) => {
+    assert.ok(selectedDates instanceof Array, 'selectedDates is an array');
+    assert.equal(selectedDates.length, 1, 'selectedDates contains a single entry');
+
+    assert.ok(selectedDates[0] instanceof Date, 'selectedDates contains DateObjects');
+
+    assert.equal(selectedDates[0].toDateString(), new Date('2080-12-05').toDateString(), 'selectedDates contains the correct Date');
+
+    assert.equal(dateStr, newFormattedDate, 'dateStr is formatted correctly');
+
+    assert.ok(instance instanceof Flatpickr, 'instance is a Flatpickr object');
+  });
+
+  this.set('dateValue', originalDate);
+  this.set('dateFormat', dateFormat);
+
+  this.render(
+    hbs`{{ember-flatpickr
+      onChange="onChange"
+      placeholder="Pick date"
+      value=(readonly dateValue)
+      dateFormat=dateFormat
+      }}`);
+
+  run(() => {
+    assert.equal($('.flatpickr-days .flatpickr-day.selected').text(), originalPosition, 'initial selected date text');
+
+    $('.flatpickr-input')[0].dispatchEvent(new Event('focus'));
+    $('.flatpickr-days .flatpickr-day').get(newPosition - 1).click();
+
+    assert.equal($('.flatpickr-days .flatpickr-day.selected').text(), newPosition, 'selected changes with dateValue');
+
+    $('.flatpickr-input')[0]._flatpickr.set('dateFormat', 'Y-m-d');
+    newFormattedDate = '2080-12-05';
+
+    $('.flatpickr-input')[0].dispatchEvent(new Event('focus'));
+    $('.flatpickr-days .flatpickr-day').get(newPosition - 1).click();
+
+    assert.equal($('.flatpickr-days .flatpickr-day.selected').text(), newPosition, 'selected changes with dateValue');
+  });
+
+});
+
+test('onChange action mut helper returns date Array', function(assert) {
+  assert.expect(5);
+
+  let originalPosition = '1';
+  let originalDate = '2080-12-01T20:00:00.000Z';
+  let newPosition = '5';
+
+  this.set('dateValue', originalDate);
+
+  this.render(
+    hbs`{{ember-flatpickr
+      onChange=(action (mut dateValue))
+      placeholder="Pick date"
+      value=(readonly dateValue)
+      }}`);
+
+  run(() => {
+    assert.equal($('.flatpickr-days .flatpickr-day.selected').text(), originalPosition, 'initial selected date text');
+
+    $('.flatpickr-input')[0].dispatchEvent(new Event('focus'));
+    $('.flatpickr-days .flatpickr-day').get(newPosition - 1).click();
+
+    assert.equal($('.flatpickr-days .flatpickr-day.selected').text(), newPosition, 'selected changes with dateValue');
+
+    assert.ok(this.get('dateValue') instanceof Array, 'dateValue is instanceof Array');
+    assert.ok(this.get('dateValue').length, 1, 'dateValue has 1 item');
+    assert.ok(this.get('dateValue')[0] instanceof Date, 'dateValue is an array of DateObjects');
+  });
+
+});
+
+test('value accepts string, dateObject or array of string/dateObjects', function(assert) {
+  assert.expect(8);
+
+  let originalDate = '2080-12-05T20:00:00.000Z';
+
+  this.set('dateValue', originalDate);
+
+  this.render(
+    hbs`{{ember-flatpickr
+      onChange=(action (mut dateValue))
+      placeholder="Pick date"
+      value=(readonly dateValue)
+      flatpickrRef=flatpickrRef
+      }}`);
+
+  run(() => {
+    assert.equal(this.get('flatpickrRef').selectedDates.length, 1, '1 date is selected');
+    assert.equal(this.get('flatpickrRef').selectedDates[0].valueOf(), new Date(originalDate).valueOf(), 'selected date is correct');
+  });
+
+  this.set('dateValue', new Date(originalDate));
+
+  this.render(
+    hbs`{{ember-flatpickr
+      onChange=(action (mut dateValue))
+      placeholder="Pick date"
+      value=(readonly dateValue)
+      flatpickrRef=flatpickrRef
+      }}`);
+
+  run(() => {
+    assert.equal(this.get('flatpickrRef').selectedDates.length, 1, '1 date is selected');
+    assert.equal(this.get('flatpickrRef').selectedDates[0].valueOf(), new Date(originalDate).valueOf(), 'selected date is correct');
+  });
+
+  this.set('dateValue', [originalDate]);
+
+  this.render(
+    hbs`{{ember-flatpickr
+      onChange=(action (mut dateValue))
+      placeholder="Pick date"
+      value=(readonly dateValue)
+      flatpickrRef=flatpickrRef
+      }}`);
+
+  run(() => {
+    assert.equal(this.get('flatpickrRef').selectedDates.length, 1, '1 date is selected');
+    assert.equal(this.get('flatpickrRef').selectedDates[0].valueOf(), new Date(originalDate).valueOf(), 'selected date is correct');
+  });
+
+  this.set('dateValue', [new Date(originalDate)]);
+
+  this.render(
+    hbs`{{ember-flatpickr
+      onChange=(action (mut dateValue))
+      placeholder="Pick date"
+      value=(readonly dateValue)
+      flatpickrRef=flatpickrRef
+      }}`);
+
+  run(() => {
+    assert.equal(this.get('flatpickrRef').selectedDates.length, 1, '1 date is selected');
+    assert.equal(this.get('flatpickrRef').selectedDates[0].valueOf(), new Date(originalDate).valueOf(), 'selected date is correct');
+  });
+
+});