Follow @endyourif rss Facebook LinkedIn

jQuery Datepicker with a Knockout js custom data binding jQuery Datepicker with a Knockout js custom data binding

Published on Feb 18, 2020

Whether you are using the Bootstrap datepicker 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 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:


<input type="text" id="myDateField" name="myDateField" data-bind="datepicker: myDateField"/>


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

jquery datepicker

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


ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        
    }
};


My init function has three inputs:


  1. element: This is the HTML element of the form input.

  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:


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


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:


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


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


$(element).datepicker('setDate', valueAccessor());


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


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

Tags: JavaScript | jQuery Tutorial | datepicker | Knockout js Tutorial | data binding

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP