Merge pull request #71 from octronic/support-clearDate-hide-and-show-events

Support clearDate, hide and show events

Author: soulim

README.md

@@ -217,13 +217,32 @@ The changeDate action is triggered when the selected date changes. It can be spe
 The action can be handled by a parent component, controller or route:
 
 ```javascript
-actions {
+actions: {
   changeDateAction(date) {
     // do sth with the new date
   }
 }
 ```
 
+#### clearDate
+
+The clearDate action is triggered when the date is cleared (e.g. when the "clear" button is clicked).
+
+
+```handlebars
+{{bootstrap-datepicker clearDate="clearDateAction"}}
+```
+
+The action can be handled by a parent component, controller or route:
+
+```javascript
+actions: {
+  clearDateAction() {
+    // do sth
+  }
+}
+```
+
 #### focus-in & focus-out
 
 The focus-in and focus-out actions are triggered when the respective focus events occur on the input field.
@@ -235,7 +254,7 @@ The focus-in and focus-out actions are triggered when the respective focus event
 The actions can be handled by a parent component, controller or route:
 
 ```javascript
-actions {
+actions: {
   focusInAction(component, event) {
     // handle event
   },
@@ -245,6 +264,26 @@ actions {
 }
 ```
 
+#### hide & show
+
+The hide and show actions are triggered when the datepicker is either hidden or displayed.
+
+```handlebars
+{{bootstrap-datepicker hide="hideAction" show="showAction"}}
+```
+
+The actions can be handled by a parent component, controller or route:
+
+```javascript
+actions: {
+  hideAction() {
+    // datepicker is hidden
+  },
+  showAction() {
+    // datepicker is shown
+  }
+}
+```
 
 
 ## Contributing

addon/components/datepicker-support.js

@@ -11,7 +11,6 @@ export default Ember.Mixin.create({
   endDate: undefined,
 
   setupBootstrapDatepicker: Ember.on('didInsertElement', function() {
-    var self = this;
 
     this.$().
       datepicker({
@@ -43,21 +42,27 @@ export default Ember.Mixin.create({
         weekStart: this.get('weekStart'),
         datesDisabled: this.get('datesDisabled')
       }).
-      on('changeDate', function(event) {
-        Ember.run(function() {
-          self._didChangeDate(event);
+      on('changeDate', event => {
+        Ember.run(() => {
+          this._didChangeDate(event);
         });
       }).
-      on('input', function() {
-        if (!self.$().val()) {
-          self._applyDateValue(null);
-        }
+      on('focusout', event => {
+        this.sendAction('focus-out', this, event);
       }).
-      on('focusout', function(event) {
-        self.sendAction('focus-out', self, event);
+      on('focusin', event => {
+        this.sendAction('focus-in', this, event);
       }).
-      on('focusin', function(event) {
-        self.sendAction('focus-in', self, event);
+      on('clearDate', event => {
+        Ember.run(() => {
+          this._didChangeDate(event);
+        });
+      }).
+      on('show', () => {
+        this.sendAction('show');
+      }).
+      on('hide', () => {
+        this.sendAction('hide');
       });
 
     this._updateDatepicker();
@@ -83,12 +88,12 @@ export default Ember.Mixin.create({
     }
 
     this.set('mustUpdateInput', false);
-    this._applyDateValue(value);
-  },
-
-  _applyDateValue: function(value) {
     this.set('value', value);
-    this.sendAction('changeDate', value);
+    if (event.type === 'clearDate') {
+      this.sendAction('clearDate');
+    } else {
+      this.sendAction('changeDate', value);
+    }
   },
 
   _addObservers: Ember.on('didInsertElement', function() {
@@ -127,8 +132,7 @@ export default Ember.Mixin.create({
   }),
 
   _updateDatepicker: function() {
-    var self = this,
-        element = this.$(),
+    var element = this.$(),
         value = this.get('value'),
         dates = [];
 
@@ -147,8 +151,8 @@ export default Ember.Mixin.create({
       default:
         dates = [null];
     }
-    dates = dates.map(function(date) {
-      return (Ember.isNone(date)) ? null : self._getDateCloneWithNoTime(date);
+    dates = dates.map(date => {
+      return (Ember.isNone(date)) ? null : this._getDateCloneWithNoTime(date);
     });
 
     element.datepicker

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

@@ -1,35 +1,48 @@
-import Ember from 'ember';
 import hbs from 'htmlbars-inline-precompile';
 import { moduleForComponent, test } from 'ember-qunit';
 
 moduleForComponent('bootstrap-datepicker', 'BootstrapDatepickerComponent', {
   integration: true
 });
 
-test('resets date when input is cleared', function (assert) {
-  assert.expect(2);
+test('triggers specified action on focusout event', function (assert) {
+  assert.expect(1);
 
-  this.set('myDate', new Date());
+  this.render(hbs`
+    {{bootstrap-datepicker focus-out="focusOutAction"}}
+  `);
+
+  var actionIsTriggered = false;
+  this.on('focusOutAction', () => {
+    actionIsTriggered = true;
+  });
+
+  this.$('input.ember-text-field').trigger('focusout');
+
+  assert.ok(actionIsTriggered, 'action is triggered on focusout');
+});
+
+test('triggers specified action on focusin event', function (assert) {
+  assert.expect(1);
 
   this.render(hbs`
-    {{bootstrap-datepicker value=myDate}}
+    {{bootstrap-datepicker focus-in="focusInAction"}}
   `);
-  
-  var datepicker = this.$('input.ember-text-field').datepicker();  
- 
-  datepicker.val('');
-  Ember.run(() => {
-    datepicker.trigger('input');
+
+  var actionIsTriggered = false;
+  this.on('focusInAction', () => {
+    actionIsTriggered = true;
   });
 
-  assert.equal(this.get('myDate'), null, 'value is reset');
-  assert.equal(this.$('input.ember-text-field').datepicker('getDate'), null, 'datepicker is updated');
+  this.$('input.ember-text-field').trigger('focusin');
+
+  assert.ok(actionIsTriggered, 'action is triggered on focusin');
 });
 
-test('triggers changeDate action when input field is cleared', function (assert) {
+test('triggers changeDate action when date selection changes', function(assert) {
   assert.expect(1);
 
-  this.set('myDate', new Date());
+  this.set('myDate', null);
 
   var actionIsTriggered = false;
   this.on('myAction', () => {
@@ -40,47 +53,62 @@ test('triggers changeDate action when input field is cleared', function (assert)
     {{bootstrap-datepicker value=myDate changeDate="myAction"}}
   `);
 
-  var datepicker = this.$('input.ember-text-field').datepicker();  
-  
-  datepicker.val('');
-  Ember.run(() => {
-    datepicker.trigger('input');
-  });
+  var input = this.$('input.ember-text-field');
+  input.datepicker('setDate', new Date());
 
   assert.ok(actionIsTriggered, 'action is triggered');
 });
 
-test('triggers specified action on focusout event', function (assert) {
+test('triggers clearDate action when date selection is cleared', function(assert) {
   assert.expect(1);
 
-  this.render(hbs`
-    {{bootstrap-datepicker focus-out="focusOutAction"}}
-  `);
+  this.set('myDate', new Date());
 
   var actionIsTriggered = false;
-  this.on('focusOutAction', () => {
+  this.on('myAction', () => {
     actionIsTriggered = true;
   });
 
-  this.$('input.ember-text-field').trigger('focusout');
+  this.render(hbs`
+    {{bootstrap-datepicker value=myDate clearDate="myAction"}}
+  `);
 
-  assert.ok(actionIsTriggered, 'action is triggered on focusout');
-});
+  var input = this.$('input.ember-text-field');
+  input.datepicker('setDate', null);
 
+  assert.ok(actionIsTriggered, 'action is triggered');
+});
 
-test('triggers specified action on focusin event', function (assert) {
+test('triggers show action when date datepicker is displayed', function(assert) {
   assert.expect(1);
 
+  var actionIsTriggered = false;
+  this.on('myAction', () => {
+    actionIsTriggered = true;
+  });
+
   this.render(hbs`
-    {{bootstrap-datepicker focus-in="focusInAction"}}
+    {{bootstrap-datepicker show="myAction"}}
   `);
 
+  this.$('input.ember-text-field').trigger('show');
+
+  assert.ok(actionIsTriggered, 'action is triggered');
+});
+
+test('triggers hide action when date datepicker is hidden', function(assert) {
+  assert.expect(1);
+
   var actionIsTriggered = false;
-  this.on('focusInAction', () => {
+  this.on('myAction', () => {
     actionIsTriggered = true;
   });
 
-  this.$('input.ember-text-field').trigger('focusin');
+  this.render(hbs`
+    {{bootstrap-datepicker hide="myAction"}}
+  `);
 
-  assert.ok(actionIsTriggered, 'action is triggered on focusin');
+  this.$('input.ember-text-field').trigger('hide');
+
+  assert.ok(actionIsTriggered, 'action is triggered');
 });