CODEWITHSUNDEEP
jqueryknockout.jsdatepicker
Chris Nevill
Chris Nevill

Reputation: 6151

Keith Wood JQuery Datepicker with Knockout binding

I'm using the Keith Wood Jquery Date Picker along with Knockout JS. This can be seen here:

http://jsfiddle.net/dDzRV/1/

  $(function () {
    $('#popupDatepicker').datepick();

});


function AppViewModel() {
    this.dateString = ko.observable("10/10/2010");

}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

When I change the textbox the knockout binding is updated appropriately. However when the datepicker is used knockout does not register the change. How can I resolve this?

Upvotes: 2

Views: 252

Answers (1)

Andrew Grothe
Andrew Grothe

Reputation: 2374

This fiddle show a working example. Basically, you need to set the value in the onSelect event of the DatePicker.

var viewModel;
$(function () {
  viewModel = new AppViewModel();
    // Activates knockout.js
      ko.applyBindings(viewModel); 

    $('#popupDatepicker').datepick({ 
        onSelect: function(dates) { 

                var minDate = dates[0]; 
                viewModel.dateString($.datepick.formatDate(minDate));
            } 
    });

});

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.dateString = ko.observable("10/10/2012");

}

Upvotes: 2

Related Questions