title: Knockout Js with Jquery UI Datepicker - "Missing instance data for this datepicker"
body: <p>I have a date declared as an observable in my view model like this:</p>
  
  <pre><code>self.date = ko.observable(date);
  </code></pre>
  
  <p>In my markup, I am declaring the control like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="input-group"&gt;
      &lt;input class="form-control datepicker" 
          data-bind="
              datepicker: date, 
              attr: { 
                  id: 'Payments_' + $index() + '_Date', 
                  name: 'Payments[' + $index() + '].Date'
              }
          "
          data-dateformat="dd/mm/yy" 
          data-val="true" 
          data-val-date="The field Date must be a date." 
          data-val-required="The Date field is required."
      /&gt;
      &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is used in a Knockout JS Template and I am trying to make it place nice with the out of the box ASP.Net MVC model binding for a collection of a custom object.</p>
  
  <p>I am using the following Knockout JS custom binding:</p>
  
  <pre><code>ko.bindingHandlers.datepicker = {
      init: function (element, valueAccessor, allBindingsAccessor) {
          //initialize datepicker with some optional options
          var options = allBindingsAccessor().datepickerOptions || { dateFormat: 'dd/mm/yy' };
          $(element).datepicker(options);
  
          //handle the field changing
          ko.utils.registerEventHandler(element, "change", function () {
              var observable = valueAccessor();
              observable($(element).datepicker("getDate"));
          });
  
          //handle disposal (if KO removes by the template binding)
          ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
              $(element).datepicker("destroy");
          });
  
      },
      //update the control when the view model changes
      update: function (element, valueAccessor) {
          var value = ko.utils.unwrapObservable(valueAccessor()),
              current = $(element).datepicker("getDate");
  
          if (value - current !== 0) {
              $(element).datepicker("setDate", value);
          }
      }
  };
  </code></pre>
  
  <p>My problem is that when a value is selected in the Datepicker, I get the following error in Chrome:</p>
  
  <pre class="lang-none prettyprint-override"><code>Uncaught Missing instance data for this datepicker 
  t.extend._getInst 
  t.extend._selectDay
  t.extend._attachHandlers.e.dpDiv.find.map.e.selectDay 
  x.event.dispatch jquery.js:4692x.event.add.y.handle
  </code></pre>
  
  <p>If I remove the attribute binding for setting the Id and Name of the control then the error does not occur. I need to be able to set this though so that the MVC Model binding can interpret it correctly. Any suggestions or ideas would be very welcome.</p>
  
  <p>Thanks</p>