Click here to Skip to main content
13,290,261 members (51,367 online)
Click here to Skip to main content
Add your own
alternative version


9 bookmarked
Posted 30 May 2014

Bootstrap datepicker and Knockout Model Binding

, 30 May 2014
Rate this:
Please Sign up or sign in to vote.
Bootstrap datepicker and Knockout Model Binding


Now a days, client side MVVM is a popular pattern using knockout.js. But the problem comes when we try to deal with date-time pickers and View Model binding. We can solve such problems using custom blinding handlers for knockout.


I am working new with Knockout and MVVM. Everything was just fine except the date binding from a bootstrap date-time picker/ date time object send from server end. After Googling for sometime, I got a solution, which I am going to demonstrate here. Before we start, we need some .js libraries like:

  1. jquery
  2. bootstrap-datepicker
  3. knockout
  4. moment (really a good and simple js lib to deal with date time objects)

Using the Code

Let's start with the basic HTML to hold our date-time picker. Here two things are quite important:

  1. data-date-format: to point format of the date picker
  2. datepicker: which is a custom binding handler work for data binding, like value: in regular knockout
<!--date inputed from client-->       
    <label class="control-label">Date From Client</label>
    <input type="text" readonly="readonly" 

    data-date-format="dd-mm-yyyy" class="datepicker" 

    data-bind="datepicker: dateFromClient" />
    <span class="help-block">Date with Formate of (dd-mm-yyyy)</span>
<!--date from server end-->       
    <label class="control-label">Date From server</label>
    <input type="text" readonly="readonly" 

    data-date-format="dd-mm-yyyy" class="datepicker" 

    data-bind="datepicker: dateFromServer" />
    <span class="help-block">ClientDate - 5 days, (dd-mm-yyyy)</span>

The custom binding handler datepicker is declared like this. We can customize it even for the jquery date time picker if we want to.

/*Date picker value binder for knockout*/
ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options).on("changeDate", function (ev) {
            var observable = valueAccessor();
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).datepicker("setValue", value);

Now, we are going to use some utility functions to use moment.js to get current date time or to convert a server side datetime object to a given date format for client end.

/*Datetime issues with moment =>*/
function currentDate() {
    return moment();                             //sends current datetime

function clientDateStringFromDate(date) {
    return moment(date).format('DD-MM-YYYY');   //converts a date object to a given formate

Now, here is the View model for our view:

/*View model*/
function ViewModel() {
    var self = this;
    self.dateFromClient = ko.observable(currentDate());      //set current date to date picker
    self.dateFromServer = ko.observable(currentDate());      //set current date to date picker

    self.init = function() {

    self.getServerDate = function () {
        var json = JSON.stringify({ date: self.dateFromClient()});     //serialize json to post 
            url: '../../Services/DateTestService.asmx/GetDate',
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            async: true,
            processData: false,
            cache: false,
            success: function (data) {
                //alert(data.d);                                //see what type of data we get   
                var date = clientDateStringFromDate(data.d);    //convert datetime object to date string.
            error: function (xhr) {
                alert('Error to connect to server.');

    /*date inputed from client, change event*/
    self.dateFromClient.subscribe(function(newValue) {

Now let's finish with date picker wrapper and model binding.

$(document).ready(function () {   
    //apply the datepicker to field

    //model binding
    var vm = new ViewModel();
    vm.init();                       //initialize the view model

I have demonstrated the basic date binding here. You can find more details in the project attachment, which is a Visual Studio 2010 solution.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Bangladesh Bangladesh
No Biography provided

You may also be interested in...

Comments and Discussions

SuggestionTypo Pin
akaustav16-Aug-15 6:08
memberakaustav16-Aug-15 6:08 
GeneralRe: Typo Pin
DiponRoy16-Aug-15 7:06
memberDiponRoy16-Aug-15 7:06 
QuestionVery nice article Pin
Faisol EPSON4-Mar-15 12:54
memberFaisol EPSON4-Mar-15 12:54 
AnswerRe: Very nice article Pin
DiponRoy5-Mar-15 3:35
memberDiponRoy5-Mar-15 3:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171207.1 | Last Updated 30 May 2014
Article Copyright 2014 by DiponRoy
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid