淘汰 js 以禁用引导程序 datepicker 中选定日期的过去日期

Question

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>

日期选择器的敲除 Js 自定义绑定

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

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

这是视图模型的两个属性

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

如何使用淘汰客户绑定禁用日历中的所有过去日期。

Answer 1

这是更新的答案，考虑到endDateLowLimit 的下限不仅应在启动时设置，而且应在每次startMeetingDate 更改时动态更新

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

虽然您可以应用每次更改 startMeetingDate 时触发的自定义事件，并自定义 datePicker 绑定以对事件做出反应。

您的视图模型可能如下所示：

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 来定位事件。

还要注意在data-bind 中使用datePickerOptions 和datePicker。我们需要它来设置datepicker 的初始选项。

现在自定义datePicker 绑定。将此创建事件处理程序的代码添加到绑定的 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，您也可能会发现它很有用。

下面是一个更详尽（但更骇人听闻）示例的链接，该示例涉及放置在不同表格行上的一系列日期选择器对。请注意，示例中的消息传递不涉及淘汰赛的subscribe。

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