jQuery UI datepicker binding for Knockout

by John

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<input type="text" data-bind="jqDatePicker: { showOn: 'both', buttonImageOnly: true }, value: myDate " />

JavaScript

ko.bindingHandlers.jqDatePicker = {

    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var options = valueAccessor() || {};

        // Initialize with options
        setTimeout(function() {
            $(element).datepicker(options);
        }, 0);
    }

};

var viewModel = {
    myDate: ko.observable(),
};

ko.applyBindings(viewModel);