敲除js以从引导日期选择器中的选定日期禁用过去的日期

Question

Html code to bind the knockout model

     <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 custome Binding for date picker

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

Now, I want to disable all the past date in calender from the selected start date. It should disable all the past date from the selected date.

Here is the two property of the view model

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

How can I disable all the past date in calender using knockout custome binding.

Answer 1

This is updated answer that takes into account that low limit on endDateLowLimit should be set not only on startup but also should be updated dynamically each time startMeetingDate has changed

As I've said in a comment I don't believe that there is 'pure knockout' way to implement this dynamic behavior.

Though you can apply custom event fired each time startMeetingDate is changed and customize the datePicker binding to react on the event.

You View Model then may look like this:

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

The markup maybe like this:

<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()}" >

Note that having id="endDate" attribute in second input is essential because self.startMeetingDate.subscribe handler uses this id to target the event.

Also note using datePickerOptions along with datePicker in the data-bind . We need it to set initial options of the datepicker .

And now to customizing the datePicker binding. Add this code that creates event handler into the binding's init method.

Just before this comment //handle removing an element from the dom would be a nice place.

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

There still may be a full range of corner cases you'll have to cope with though I believe this answer helps you to get the general idea.

You may also find useful this documentation https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html in case you've missed it.

Below is a link to more elaborative (yet more hackerish) example that involves a range of date picker pairs placed on separate table rows. Note that knockout's subscribe is not involved in message passing in the example.

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