如何在 DatePicker 中动态禁用日期 - 淘汰赛

Question

我正在使用这个插件：http://eonasdan.github.io/bootstrap-datetimepicker/

我有一个 DropDown 向服务器发送 Ajax 请求以加载日期列表/数组，然后我只需要在 DateTime Picker 中启用该数组中的日期。我在 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>

我的日期时间自定义活页夹：

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

还有 ViewModel：

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 并将更改应用于日历。

一些注意事项关于如何设置启用日期：

1 您实际上是通过分配 变量一个简单的数组： 所以这个：

self.EnabledDates = [];

应该是：

self.EnabledDates([]);

2 加载数组的方式效率不高，因为每次将元素加载到数组时都会触发该可观察对象的所有观察者（可计算对象和绑定），最好的方法是使用临时数组加载所有启用的日期，然后将该数组加载到可观察数组中，这样它只会触发一次：

       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/