added onShow & onHide events, resolves t1m0n#95

dist/js/datepicker.js

@@ -75,6 +75,8 @@
 
  // events
  onSelect: '',
+ onShow: '',
+ onHide: '',
  onChangeMonth: '',
  onChangeYear: '',
  onChangeDecade: '',
@@ -785,12 +787,20 @@
  },
 
  show: function () {
+ var onShow = this.opts.onShow;
+
  this.setPosition(this.opts.position);
  this.$datepicker.addClass('active');
  this.visible = true;
+
+ if (onShow) {
+ this._bindVisionEvents(onShow)
+ }
  },
 
  hide: function () {
+ var onHide = this.opts.onHide;
+
  this.$datepicker
  .removeClass('active')
  .css({
@@ -803,6 +813,10 @@
  this.inFocus = false;
  this.visible = false;
  this.$el.blur();
+
+ if (onHide) {
+ this._bindVisionEvents(onHide)
+ }
  },
 
  down: function (date) {
@@ -813,6 +827,12 @@
  this._changeView(date, 'up');
  },
 
+ _bindVisionEvents: function (event) {
+ this.$datepicker.off('transitionend.dp');
+ event(this, false);
+ this.$datepicker.one('transitionend.dp', event.bind(this, this, true))
+ },
+
  _changeView: function (date, dir) {
  date = date || this.focused || this.date;
 

src/js/datepicker.js

@@ -75,6 +75,8 @@
 
  // events
  onSelect: '',
+ onShow: '',
+ onHide: '',
  onChangeMonth: '',
  onChangeYear: '',
  onChangeDecade: '',
@@ -785,12 +787,20 @@
  },
 
  show: function () {
+ var onShow = this.opts.onShow;
+
  this.setPosition(this.opts.position);
  this.$datepicker.addClass('active');
  this.visible = true;
+
+ if (onShow) {
+ this._bindVisionEvents(onShow)
+ }
  },
 
  hide: function () {
+ var onHide = this.opts.onHide;
+
  this.$datepicker
  .removeClass('active')
  .css({
@@ -803,6 +813,10 @@
  this.inFocus = false;
  this.visible = false;
  this.$el.blur();
+
+ if (onHide) {
+ this._bindVisionEvents(onHide)
+ }
  },
 
  down: function (date) {
@@ -813,6 +827,12 @@
  this._changeView(date, 'up');
  },
 
+ _bindVisionEvents: function (event) {
+ this.$datepicker.off('transitionend.dp');
+ event(this, false);
+ this.$datepicker.one('transitionend.dp', event.bind(this, this, true))
+ },
+
  _changeView: function (date, dir) {
  date = date || this.focused || this.date;
 

tests/index.html

@@ -23,7 +23,7 @@
  <style type="text/css">
  /* Remove transitions to test position options*/
  .datepicker {
- transition: none !important;
+ transition-duration: 0s !important;
  }
  </style>
  </head>

tests/specs/events.js

@@ -15,6 +15,7 @@ var assert = chai.assert,
  afterEach(function () {
  if (dp && destroy) {
  dp.destroy();
+ dp = '';
  }
 
  destroy = true;
@@ -78,6 +79,39 @@ var assert = chai.assert,
  expect(dates).to.have.length(2)
  })
  });
+
+ describe('onShow', function () {
+ it('should add callback when datepicker is showing', function () {
+ var test = '';
+ dp = $input.datepicker({
+ onShow: function (dp, completed) {
+ if (!completed) {
+ test = dp;
+ }
+ }
+ }).data('datepicker');
+
+ dp.show();
+ expect(test).to.be.equal(dp);
+ })
+ });
+
+ describe('onHide', function () {
+ it('should add callback when datepicker is hiding (after transition completed)', function () {
+ var test = '';
+ dp = $input.datepicker({
+ onHide: function (dp, completed) {
+ if (!completed) {
+ test = dp;
+ }
+ }
+ }).data('datepicker');
+
+ dp.show();
+ dp.hide();
+ expect(test).to.be.equal(dp);
+ });
+ });
 
  describe('onRenderCell', function () {
  it('should add callback when cell is rendered', function () {

tests/specs/static-methods.js

@@ -5,7 +5,6 @@ var assert = chai.assert,
 describe('Datepicker', function () {
  describe('getDaysCount', function () {
  it('should return 31 days in December', function () {
- console.log(plugin.getDaysCount);
  assert.equal(plugin.getDaysCount(new Date(2015, 11)), 31)
  });
  it('should return 30 days in September', function () {