Add support for beforeShowDay and related options

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`

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() {

tests/dummy/app/templates/index.hbs

@@ -83,6 +83,26 @@ ember generate bootstrap-datepicker</pre>
     </div>
   </div>
 
+  <h3>beforeShowDay</h3>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <pre><code>&#123;&#123;bootstrap-datepicker beforeShowDay=myBeforeShowDay placeholder="Click to play" class="form-control"&#125;&#125;</code></pre>
+    </div>
+    <div class="panel-body">
+      <p>
+        Type: <code>Function</code><br>
+        Default: <code>Ember.$.noop</code>
+      </p>
+      <p>The options for <code>beforeShowMonth</code>, <code>beforeShowYear</code>, <code>beforeShowDecade</code>, and <code>beforeShowCentury</code> are used similarly.</p>
+      <p>You could read more about beforeShowDay and related functions <a href="https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#beforeshowday">here</a>.</p>
+    </div>
+    <div class="panel-footer">
+      {{bootstrap-datepicker beforeShowDay=Ember.$.noop
+                             placeholder="Click to play"
+                             class="form-control"}}
+    </div>
+  </div>
+
   <h3>calendarWeeks</h3>
   <div class="panel panel-default">
     <div class="panel-heading">

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');
+});