javascript - Knockout js 禁用引导日期选择器中所选日期的过去日期

Question

绑定(bind) knockout 模型的HTML代码

     <tbody data-bind="foreach: responseUserSetUpData().userListViewModel">
                        <tr>
                            <td><input type="text" class="datepicker form-control"  data-bind="datePicker: ko.observable(new Date(FormatStartDate)) , textInput : FormatStartDate , attr: {id: UserId}, datePickerOptions: {startDate: new Date()}"></td>
                            <td><input type="text" class="datepicker form-control" data-bind="datePicker: ko.observable(new Date(FormatEndDate)), textInput: FormatEndDate , attr :{id: UserId}, datePickerOptions: {startDate: new Date(FormatStartDate)}" ></td>
                        </tr>
                        </tbody>

Knockout Js 自定义日期选择器绑定(bind)

    ko.bindingHandlers.datePicker = {
            init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                var unwrap = ko.utils.unwrapObservable;
                var dataSource = valueAccessor();
                var binding = allBindingsAccessor();
                var options = {
                    keyboardNavigation: true,
                    todayHighlight: true,
                    autoclose: true,
                    daysOfWeekDisabled: [0, 6],
                    format: 'mm/dd/yyyy',
                    startDate: userManagementVM.StartMeetingDate()
                };
                if (binding.datePickerOptions) {
                    options = $.extend(options, binding.datePickerOptions);
                }
                $(element).datepicker(options);
                $(element).datepicker('update', dataSource());
                $(element).on("changeDate", function (ev) {
                    var observable = valueAccessor();
                    if ($(element).is(':focus')) {
                        $(element).one('blur', function (ev) {
                            var dateVal = $(element).datepicker("getDate");
                            observable(dateVal);
                        });
                    }
                    else {
                        observable(ev.date);
                    }
                });
                //handle removing an element from the dom
                ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                    $(element).datepicker('remove');
                });
            },
            update: function (element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor());
                $(element).datepicker('update', value);
            }
        };

现在，我想禁用日历中从所选开始日期开始的所有过去日期。它应该禁用所选日期中所有过去的日期。

这是 View 模型的两个属性

StartMeetingDate: ko.observable(new Date()),
    EndMeetingDate: ko.observable(),

如何使用 knockout 客户绑定(bind)禁用日历中的所有过去日期。

Answer 1

这是更新的答案，考虑了 endDateLowLimit 的下限不仅应该在启动时设置，还应该每次动态更新startMeetingDate已改变

正如我在评论中所说，我不相信有“纯粹的 knockout ”方式来实现这种动态行为。

尽管您可以应用每次触发的自定义事件 startMeetingDate更改并自定义datePicker绑定(bind)以对事件使用react。

您查看模型可能如下所示:

function ViewModel(){
    var self   = this;
    //    ..... 
    self.startDateLowLimit = ko.observable(new Date());
    self.startDateHihgLimit = ko.pureComputed(function(){
        return new Date(self.startDateLowLimit().getTime() + 30 * 86400000);    //  roughly 30 days from self.startMeetingDate()
    });

    self.startMeetingDate = ko.observable(self.startDateLowLimit());

    self.startMeetingDate.subscribe(function(newStartDate) { $('#endDate').trigger('DATE-FROM-CHANGED', [newStartDate])});    //    this is where custom event is fired


    self.endDateLowLimit = ko.pureComputed(function(){
        return self.startMeetingDate();
    });
    self.endMeetingDate = ko.observable(null);
    //    ..... 
}

标记可能是这样的:

<label>Start meeting date</label>
<input type="text" class="datepicker form-control"  id="startDate"  data-bind="datePicker: startMeetingDate, datePickerOptions: {startDate: startDateLowLimit(), endDate: startDateHihgLimit()}" >
<label>End meeting date</label>
<input type="text" class="datepicker form-control"  id="endDate"  data-bind="datePicker: endMeetingDate, datePickerOptions: {startDate: endDateLowLimit()}" >

请注意，有 id="endDate"第二个输入中的属性至关重要，因为 self.startMeetingDate.subscribe处理程序使用此 id 来定位事件。

另请注意使用 datePickerOptions以及datePicker在 data-bind 。我们需要它来设置 datepicker 的初始选项.

现在自定义 datePicker捆绑。将创建事件处理程序的代码添加到绑定(bind)的 init 中方法。

就在这条评论之前//handle removing an element from the dom将是一个不错的地方。

$(element).on('DATE-FROM-CHANGED', function (ev, newStartDate) {
    const isDateValid = function(date) {
        //    this is a utility function that checks either parameter is a valid date
        return date.getTime && date.getTime() === date.getTime();    //    invalid date object returns NaN for getTime() and NaN is the only object not strictly equal to itself
    }

    var currentDate = $(ev.target).datepicker('getDate');
    if (isDateValid(newStartDate) && isDateValid(currentDate) && currentDate < newStartDate) {
        //    we should clean the current date if it is less then the new start date
        $(ev.target).datepicker('setDate', null);
    }
    $(ev.target).datepicker('setStartDate', newStartDate);    //    this is exactly where we set new start date for the datepicker
});

尽管我相信这个答案可以帮助您了解总体思路，但您仍然可能需要处理各种极端情况。

您可能还会发现此文档很有用 https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html万一您错过了。

下面是更详尽(但更黑客)示例的链接，其中涉及放置在单独表行上的一系列日期选择器对。请注意 knockout 的 subscribe示例中不涉及消息传递。

https://jsfiddle.net/rLh2r9pw/19/