disable jquery datepicker via knckoutjs radio button

Question

The radio option in my application return three values allday, morning and halfday. How can I tie my jquery datepicker as such that it is enabled only when allday is selected.

var viewModel = function () {
    this.holidayType = ko.observable();
    this.allday = ko.computed(
        {
            read: function () {
                return this.holidayType() == "allday";
            },
            write: function (value) {
                if (value)
                    this.holidayType("allday");
            }
        }, this);
    this.morning = ko.computed(
     {
    read: function () {
        return this.holidayType() == "morning";
    },
    write: function (value) {
        if (value)
            this.holidayType("morning");
    }
    }, this);
    this.afternoon = ko.computed(
    {
        read: function () {
        return this.holidayType() == "afternoon";
    },
    write: function (value) {
     if (value)
        this.holidayType("afternoon");
    }
    }, this);
};
ko.applyBindings(new viewModel());

$(function () {
    $("#e1").daterangepicker({
        datepickerOptions: {
            minDate: 0
        }
    });
});

Answer 1

First, I added an observable named dateRangeButton to your viewmodel. This observable will hold a jQuery selector to the dynamically generated <button> that is created by the date range picker plug-in:

this.dateRangeButton = ko.observable();

Then I added a function to the viewmodel called enableDisableDateRange . When called, this function will add or remove the disabled attribute to the date range picker button based on whether or not the holidayType equals "allday":

this.enableDisableDateRange = function(context) {
    context.dateRangeButton().prop('disabled', context.holidayType() != 'allday');
}

How do we get the selector for the date range picker button? I created a custom binding which will apply the date range picker to the element and populate the dateRangeButton observable in the viewmodel:

ko.bindingHandlers.datePicker = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // apply the date range picker
        $(element).daterangepicker({
            datepickerOptions: {
                minDate: 0
            }
        });
        // tell the viewmodel where the date range picker button is
        bindingContext.$data.dateRangeButton($(element).next('button'));
        // enable or disable the button
        bindingContext.$data.enableDisableDateRange(bindingContext.$data);
    }
};

I added this binding to the <input> element that will contain the date range picker:

<input id="e1" name="e1" data-bind="datePicker: ''">

Finally, I added a subscribe to the holidayType observable which will call the enableDisableDateRange function any time holidayType changes:

this.holidayType.subscribe(function() {
    this.enableDisableDateRange(this);
}, this);

Here is a fiddle: http://jsfiddle.net/6cfb1dLg/

NOTE: This all relies on how the date range picker arranges it's UI. Currently, it creates a <button> element directly after the <input> element it is applied to. If this changes, then the datePicker custom binding I wrote would have to be modified as well. The custom binding also assumes the presence of an observable named dateRangeButton and a function named enableDisableDateRange exist within the viewmodel.