diff --git a/README.md b/README.md index be03f97..6d1b260 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,17 @@ Default: `false` {{bootstrap-datepicker value=expiresAt autoclose=true}} ``` +#### beforeShowDay + +Type: `Function` +Default: `Ember.$.noop` + +The options for `beforeShowMonth`, `beforeShowYear`, `beforeShowDecade`, and `beforeShowCentury` are used similarly. + +```handlebars +{{bootstrap-datepicker value=expiresAt beforeShowDay=myBeforeShowDay}} +``` + #### calendarWeeks Type: `Boolean` diff --git a/addon/components/datepicker-support.js b/addon/components/datepicker-support.js index 5538418..ee30784 100644 --- a/addon/components/datepicker-support.js +++ b/addon/components/datepicker-support.js @@ -9,6 +9,11 @@ export default Ember.Mixin.create({ language: undefined, startDate: undefined, endDate: undefined, + beforeShowDay: Ember.$.noop, + beforeShowMonth: Ember.$.noop, + beforeShowYear: Ember.$.noop, + beforeShowDecade: Ember.$.noop, + beforeShowCentury: Ember.$.noop, customParser: function(value) { return value; }, @@ -43,7 +48,12 @@ export default Ember.Mixin.create({ todayHighlight: this.get('todayHighlight'), toggleActive: this.get('toggleActive'), weekStart: this.get('weekStart'), - datesDisabled: this.get('datesDisabled') + datesDisabled: this.get('datesDisabled'), + beforeShowDay: this.get('beforeShowDay'), + beforeShowMonth: this.get('beforeShowMonth'), + beforeShowYear: this.get('beforeShowYear'), + beforeShowDecade: this.get('beforeShowDecade'), + beforeShowCentury: this.get('beforeShowCentury'), }). on('changeDate', event => { Ember.run(() => { @@ -132,6 +142,36 @@ export default Ember.Mixin.create({ this.$().data('datepicker')._process_options({format: format}); this._updateDatepicker(); }); + + this.addObserver('beforeShowDay', function() { + this.$().datepicker('beforeShowDay', this.get('beforeShowDay')); + this.$().data('datepicker')._process_options({beforeShowDay: this.get('beforeShowDay')}); + this._updateDatepicker(); + }); + + this.addObserver('beforeShowMonth', function() { + this.$().datepicker('beforeShowMonth', this.get('beforeShowMonth')); + this.$().data('datepicker')._process_options({beforeShowMonth: this.get('beforeShowMonth')}); + this._updateDatepicker(); + }); + + this.addObserver('beforeShowYear', function() { + this.$().datepicker('beforeShowYear', this.get('beforeShowYear')); + this.$().data('datepicker')._process_options({beforeShowYear: this.get('beforeShowYear')}); + this._updateDatepicker(); + }); + + this.addObserver('beforeShowDecade', function() { + this.$().datepicker('beforeShowDecade', this.get('beforeShowDecade')); + this.$().data('datepicker')._process_options({beforeShowDecade: this.get('beforeShowDecade')}); + this._updateDatepicker(); + }); + + this.addObserver('beforeShowCentury', function() { + this.$().datepicker('beforeShowCentury', this.get('beforeShowCentury')); + this.$().data('datepicker')._process_options({beforeShowCentury: this.get('beforeShowCentury')}); + this._updateDatepicker(); + }); }), _updateDatepicker: function() { diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs index 950386e..0c5e910 100644 --- a/tests/dummy/app/templates/index.hbs +++ b/tests/dummy/app/templates/index.hbs @@ -83,6 +83,26 @@ ember generate bootstrap-datepicker +

beforeShowDay

+
+
+ 
{{bootstrap-datepicker beforeShowDay=myBeforeShowDay placeholder="Click to play" class="form-control"}}
+
+
+

+ Type: Function
+ Default: Ember.$.noop +

+

The options for beforeShowMonth, beforeShowYear, beforeShowDecade, and beforeShowCentury are used similarly.

+

You could read more about beforeShowDay and related functions here.

+
+
+ {{bootstrap-datepicker beforeShowDay=Ember.$.noop + placeholder="Click to play" + class="form-control"}} +
+
+

calendarWeeks

diff --git a/tests/unit/components/bootstrap-datepicker-test.js b/tests/unit/components/bootstrap-datepicker-test.js index 8c27b3f..5423e79 100644 --- a/tests/unit/components/bootstrap-datepicker-test.js +++ b/tests/unit/components/bootstrap-datepicker-test.js @@ -137,3 +137,83 @@ test('updates minViewMode', function(assert) { assert.equal(this.$().data('datepicker').o.minViewMode, monthsViewModeNumber, 'updates minViewMode'); }); + +test('updates beforeShowDay', function(assert) { + var initialFunction = function() { + return false; + }; + var newFunction = function() { + return true; + }; + var component = this.subject({ + value: new Date(2015, 4), + beforeShowDay: initialFunction + }); + assert.equal(this.$().data('datepicker').o.beforeShowDay, initialFunction, 'sets initial beforeShowDay'); + component.set('beforeShowDay', newFunction); + assert.equal(this.$().data('datepicker').o.beforeShowDay, newFunction, 'updates beforeShowDay'); +}); + +test('updates beforeShowMonth', function(assert) { + var initialFunction = function() { + return false; + }; + var newFunction = function() { + return true; + }; + var component = this.subject({ + value: new Date(2015, 4), + beforeShowMonth: initialFunction + }); + assert.equal(this.$().data('datepicker').o.beforeShowMonth, initialFunction, 'sets initial beforeShowMonth'); + component.set('beforeShowMonth', newFunction); + assert.equal(this.$().data('datepicker').o.beforeShowMonth, newFunction, 'updates beforeShowMonth'); +}); + +test('updates beforeShowYear', function(assert) { + var initialFunction = function() { + return false; + }; + var newFunction = function() { + return true; + }; + var component = this.subject({ + value: new Date(2015, 4), + beforeShowYear: initialFunction + }); + assert.equal(this.$().data('datepicker').o.beforeShowYear, initialFunction, 'sets initial beforeShowYear'); + component.set('beforeShowYear', newFunction); + assert.equal(this.$().data('datepicker').o.beforeShowYear, newFunction, 'updates beforeShowYear'); +}); + +test('updates beforeShowDecade', function(assert) { + var initialFunction = function() { + return false; + }; + var newFunction = function() { + return true; + }; + var component = this.subject({ + value: new Date(2015, 4), + beforeShowDecade: initialFunction + }); + assert.equal(this.$().data('datepicker').o.beforeShowDecade, initialFunction, 'sets initial beforeShowDecade'); + component.set('beforeShowDecade', newFunction); + assert.equal(this.$().data('datepicker').o.beforeShowDecade, newFunction, 'updates beforeShowDecade'); +}); + +test('updates beforeShowCentury', function(assert) { + var initialFunction = function() { + return false; + }; + var newFunction = function() { + return true; + }; + var component = this.subject({ + value: new Date(2015, 4), + beforeShowCentury: initialFunction + }); + assert.equal(this.$().data('datepicker').o.beforeShowCentury, initialFunction, 'sets initial beforeShowCentury'); + component.set('beforeShowCentury', newFunction); + assert.equal(this.$().data('datepicker').o.beforeShowCentury, newFunction, 'updates beforeShowCentury'); +});