jQuery Datepicker with a Knockout js custom data binding

Whether you are using the Bootstrap datepicker with a JavaScript array or the jQuery datepicker, they both use the same underlying JavaScript library. So with today’s example, let’s explore implementing the jQuery library with an added bonus of creating a Knockout.js custom binding.

The end goal of this custom data bind jQuery tutorial is to create a form input field data bound not to the standard value binding, but instead to the custom one appropriately named: datepicker.

Custom data binding with Knockout js

The end goal of today’s Knockout.js tutorial is to have a reusable binding that can be implemented as follows:

[code]
<input type=”text” id=”myDateField” name=”myDateField” data-bind=”datepicker: myDateField”/>
[/code]

When we instantiate the date picker, this regular input field will be replaced with a nice calendar:

To create the custom data binding I need to extend the ko.bindingHandlers and create a new datepicker function as follows:

[code]
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {

}
};
[/code]

My init function has three inputs:

1. element: This is the jquery HTML template of the form input element.
2. valueAccessor: This is the observable variable that will be set when a user picks a date.
3. allBindingsAccessor: This is an object that contain additional options to pass to the custom data binding. This is useful to create the jQuery datepicker with custom options.

Creating the jQuery datepicker or Bootstrap datepicker

Inside the init function I will create the jQuery datepicker with options:

[code]
//initialize datepicker with some optional options
var options = {
format: ‘MM d, yyyy’,
autoclose: true
};
$(element).datepicker(options);
[/code]

Of course you can update the options with any values the jQuery datepicker supports. All of the code will also work seamlessly with the Bootstrap datepicker.

On occasion you may wish to apply custom logic when the user selects a date. I accomplish this by using ko.utils.registerEventHandler to listen for the event changeDate as follows:

[code]
//when a user changes the date
ko.utils.registerEventHandler(element, “changeDate”, function (event) {
if (event.date !== null && event.date !== undefined)
// do some additional processing
});
[/code]

I also sometimes use blur in combination with changeDate. And finally you can also set the date if your observable contains an existing value:

[code]
$(element).datepicker(‘setDate’, valueAccessor());
[/code]

Here is the final Knockout js custom data binding that implements the jQuery datepicker:

[code]
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {

//initialize datepicker with some optional options
var options = {
format: ‘MM d, yyyy’,
autoclose: true
};
$(element).datepicker(options);

$(element).datepicker(‘setDate’, valueAccessor());

//when a user changes the date
ko.utils.registerEventHandler(element, “changeDate”, function (event) {

});

ko.utils.registerEventHandler(element, “blur”, function(event) {

});
}
};
[/code]