jQuerybUI datepicker() with dynamic knockout loop

Question

I have got this templated knockout-loop:

<div id="accordion" data-bind="jqAccordion:{},template: {name: 'task-template',foreach: Tasks,afteradd: function(elem){$(elem).trigger('valueChanged');}}">.   </div> 

<script type="text/html" id="task-template">
     <div data-bind="attr: {'id': 'Task' + TaskId}" class="group">
          <h3><b><input name="TaskName" data-bind="value: TaskName  /></b></h3>
          <p>
             Due Date: <input class="datepicker" data-bind="myDatepicker : {}, value: taskDueDate" />
          </p>
     </div>
</script>

Where datepicker is a jQuery Ui datepicker function:

ko.bindinghandler.myDatepicker =  $(function() {
    init: function( element, valueAccessor) {

        $(element).datepicker({
           changeMonth: true,
           changeYear: true
        });
    }), 
    etc.
}

why does this not work?

Symptoms are: the calender is showing and the widget respond to my interactions but no date is returned to the input-field. Any clues?

Thank you in advance!

Have you checked this databicker bindinghandler implementation? http://stackoverflow.com/questions/6612705/jquery-ui-datepicker-change-event-not-caught-by-knockoutjs — nemesv, Sep 26 '13 at 19:09
Thanx nemesv, that was a valuable link! :) Still haven´t got it to work though. I probably show off my lack of understanding here: there must be something I don´t quite grab... When clicking on the datepicker I get an error message in the console saying: "uncaught exception: Missing instance data for this datepicker"... — Asle G, Sep 27 '13 at 07:05
@AsleG any further luck with this? I'm experience the same issue in the last comment and a similar setup to what you've described in your question. — Justin, Oct 18 '13 at 23:46
@Justin I switched to datetimepicker a plugin I found. It´s not working 100%, but I the error message has gone. I have put it aside to focus on some other issues I´m struggling with, but will eventually dive in it again. :) — Asle G, Oct 20 '13 at 20:29

Brett Green · Answer 1 · 2015-04-17T16:01:19.943

You need to bind some viewModel attribute to the datepicker binding... You're overthinking that part.

But you do need to do some special handling for when the datepicker changes the element's value because it will otherwise mess up the way knockout normally intercepts the change.

Set up the binding like this...

HTML:

<div id="accordion" data-bind="jqAccordion:{},template: {name: 'task-template',foreach: Tasks,afteradd: function(elem){$(elem).trigger('valueChanged');}}">.   </div> 

<script type="text/html" id="task-template">
     <div data-bind="attr: {'id': 'Task' + TaskId}" class="group">
          <h3><b><input name="TaskName" data-bind="value: TaskName  /></b></h3>
          <p>
             Due Date: <input class="datepicker" data-bind="myDatepicker : taskDueDate" />
          </p>
     </div>
</script>

And the handler like so:

ko.bindingHandlers.myDatepicker =  {
    init: function(element, valueAccessor) {
        var unwrappedObs = valueAccessor();
        $(element).val(ko.unwrap(unwrappedObs));
        $(element).datepicker({
           changeMonth: true,
           changeYear: true
        });
        ko.utils.registerEventHandler(element, "change", function () {
            var unwrappedObs = valueAccessor(),
            val = $(element).datepicker("getDate");
            unwrappedObs(val);
        });
    } 
};

Here's a fiddle: http://jsfiddle.net/brettwgreen/nmb6c6gq/

jQuerybUI datepicker() with dynamic knockout loop

1 Answers1