如何動態中的DatePicker禁用日期 - 淘汰賽

Question

我使用這個插件：http://eonasdan.github.io/bootstrap-datetimepicker/

我有發送Ajax請求到服務器的下拉菜單加載日期列表/數組，然後我只需要啓用日期時間選擇器中該數組中的日期。我創建了一個類似的場景上的jsfiddle：http://jsfiddle.net/mdawood1991/sd2gmhop/12/

下面是HTML：

<div class="row"> 
    <div class="col-md-4"> 
     <select class="form-control" data-bind="options: Countries, optionsCaption: '-- Please Select --', value: SelecteItem"></select> 
    </div> 
    <div class="col-md-4"> 
     <label class="main-label">Date</label> 
     <div class='input-group date'> 
      <input type='text' class="form-control" data-bind="datepicker: SelectedDate" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
     </div> 
    </div> 
    <div class="col-md-4"></div> 
</div> 

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre> 

我的DateTime定製綁定：

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

和視圖模型：

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); 

如何我只能啓用EnabledDates陣列中的日期。

Answer 1

您可以使用觀察EnabledDates並將更改應用到日曆的自定義綁定。

謹慎的你如何設置啓用日期一些注意事項：

你被分配 變量的簡單數組實際上配置了觀察到的數組： 所以這個：

self.EnabledDates = []; 

應該是：

self.EnabledDates([]); 

加載數組的方式效率不高，因爲每次將元素加載到數組中時，都會觸發該observable的所有觀察者（可計算和綁定），最好的方法是使用臨時數組加載所有已啓用的日期，然後加載到數組的數組觀察到，這種方式只觸發一次：

 self.SelecteItem.subscribe(function() { 
      var tempArray = []; 
      if (self.SelecteItem() == "France") { 

       tempArray.push(new moment('Date(1431514972533)')); 
       tempArray.push(new moment('Date(1431082972533)')); 

      } else { 
       tempArray.push(new moment(new Date())); 
      } 
      self.EnabledDates(tempArray); 

     }); 

瞭解更多關於此這裏： http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html

最後的自定義綁定：

ko.bindingHandlers.enableDisable = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    ko.bindingHandlers.enableDisable.update(element,valueAccessor); 
    }, 
    update: function (element, valueAccessor) { 
    var enabledDates = valueAccessor()(); 
    //apply disabled dates 
    $(element).data("DateTimePicker").enabledDates(enabledDates); 
    } 
} 

小提琴這裏：http://jsfiddle.net/luisvsilva/sd2gmhop/10/