title: How to Dynamically disable dates in DatePicker - Knockout
body: <p>I am using this Plugin: <a href="http://eonasdan.github.io/bootstrap-datetimepicker/" rel="nofollow">http://eonasdan.github.io/bootstrap-datetimepicker/</a></p>
  
  <p>I have a DropDown which sends an Ajax Request to the Server to load a list/Array of Dates, then I need to only enable the Dates in that Array in the DateTime Picker. I have created a Similar Scenario on JSFiddle: <a href="http://jsfiddle.net/mdawood1991/sd2gmhop/12/" rel="nofollow">http://jsfiddle.net/mdawood1991/sd2gmhop/12/</a></p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
          &lt;select class="form-control" data-bind="options: Countries, optionsCaption: '-- Please Select --', value: SelecteItem"&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;label class="main-label"&gt;Date&lt;/label&gt;
          &lt;div class='input-group date'&gt;
              &lt;input type='text' class="form-control" data-bind="datepicker: SelectedDate" /&gt; &lt;span class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;pre data-bind="text: ko.toJSON($data, null, 2)"&gt;&lt;/pre&gt;
  </code></pre>
  
  <p>My DateTime Custom Binder:</p>
  
  <pre><code>ko.bindingHandlers.datepicker = {
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          //initialize datepicker with some optional options
          var options = {
              format: 'DD/MM/YYYY HH:mm',
              defaultDate: valueAccessor()()
          };
  
          if (allBindingsAccessor() !== undefined) {
              if (allBindingsAccessor().datepickerOptions !== undefined) {
                  options.format = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : options.format;
              }
          }
  
          $(element).datetimepicker(options);
  
          //when a user changes the date, update the view model
          ko.utils.registerEventHandler(element, "dp.change", function (event) {
              var value = valueAccessor();
              if (ko.isObservable(value)) {
                  value(event.date);
              }
          });
  
          var defaultVal = $(element).val();
          var value = valueAccessor();
          value(moment(defaultVal, options.format));
      },
      update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          // when ViewModel is updated, update the DatePicker Control
          var thisFormat = 'DD/MM/YYYY HH:mm';
  
          if (allBindingsAccessor() !== undefined) {
              if (allBindingsAccessor().datepickerOptions !== undefined) {
                  thisFormat = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : thisFormat;
              }
          }
  
          var value = valueAccessor();
          var unwrapped = ko.utils.unwrapObservable(value());
  
          if (unwrapped === undefined || unwrapped === null) {
              element.value = new moment(new Date());
              console.log("undefined");
          } else {
              element.value = unwrapped.format(thisFormat);
          }
      }
  };
  </code></pre>
  
  <p>And the ViewModel:</p>
  
  <pre><code>function viewModel() {
      var self = this;
  
      self.Countries = ko.observableArray(['France', 'Germany', 'Spain']);
      self.SelecteItem = ko.observable();
      self.EnabledDates = ko.observableArray();
      self.SelectedDate = ko.observable(new Date());
  
      self.SelecteItem.subscribe(function () {
          self.EnabledDates = [];
          if (self.SelecteItem() == "France") {
  
              self.EnabledDates.push(new moment('Date(1431514972533)'));
              self.EnabledDates.push(new moment('Date(1431082972533)'));
  
          } else {
              self.EnabledDates.push(new moment(new Date()));
          }
  
  
      });
  }
  
  var testviewModel = new viewModel();
  
  ko.applyBindings(testviewModel);
  </code></pre>
  
  <p>How can I only enable Dates in <code>EnabledDates</code> Array. </p>