title: jQuery Datepicker: setDate is not a function
body: <p>I am currently trying to make an inline datepicker object interact with a date input, and have managed everything but one thing. When I try to use the change event of the input, it throws an error:</p>
  
  <pre><code>Uncaught TypeError: $.start_widget.setDate is not a function
  </code></pre>
  
  <p>My Django template/jQuery code is as follows, included in a script tag which is inserted in the head of the document:</p>
  
  <pre><code>$(document).ready(function(){
  
    {% for string in datepickerstrings %}
      jQuery.{{ string }}_widget = $('#datepicker-{{ string }}');
  
      $.{{ string }}_widget.datepicker({
        inline: true,
        altField: '#event-{{ string }}',
        onSelect: function (date, instance) {
          $('#event-{{ string }}').val(date);
        }
      });
      $.{{ string }}_widget.hide();
  
      $('#event-{{ string }}').focusin(function () {
          $.{{ string }}_widget.show();
      });
  
      $('#{{ string }}-close').on("click", function (e) {
          e.preventDefault();
          $.{{ string }}_widget.hide();
      });
  
      $('#event-{{ string }}').change(function () {
          console.log("Changed date value from field: " + $(this).val());
          $.{{ string }}_widget.setDate($(this).val());
      });
    {% endfor %}
  
  });
  </code></pre>
  
  <p>This is then processed before being sent to the client like this (relevant loop only):</p>
  
  <pre><code>$(document).ready(function(){
  
  
      jQuery.start_widget = $('#datepicker-start');
  
      $.start_widget.datepicker({
        inline: true,
        altField: '#event-start',
        onSelect: function (date, instance) {
          $('#event-start').val(date);
        }
      });
      $.start_widget.hide();
  
      $('#event-start').focusin(function () {
          $.start_widget.show();
      });
  
      $('#start-close').on("click", function (e) {
          e.preventDefault();
          $.start_widget.hide();
      });
  
      $('#event-start').change(function () {
          console.log("Changed date value from field: " + $(this).val());
          $.start_widget.setDate($(this).val());
      });
  
  });
  </code></pre>
  
  <p>To me, this looks like the <code>$.start_widget</code>-object is clearly defined and initialised before the change event handler, and yet it throws the above exception. The <code>console.log</code> call shows the correct date.</p>
  
  <p>I also tried replacing the <code>setDate</code> call with this:</p>
  
  <pre><code>$.start_widget.datepicker( "setDate", $(this).val() );
  </code></pre>
  
  <p>However, I got the same result. I have been trying to figure this out for hours, but seem to be unable to figure it out on my own. What is wrong with my code?</p>
  
  <p>EDIT 1: With ImBack's suggestion, I get this error instead:</p>
  
  <pre><code>Uncaught TypeError: date.getDate is not a function
      _setDate @ ui.datepicker.js:1077
      _setDateDatepicker @ ui.datepicker.js:243
      (anonymous function) @ ui.datepicker.js:1426
      each @ jquery-1.8.3.min.js:2
      each @ jquery-1.8.3.min.js:2
      $.fn.datepicker @ ui.datepicker.js:1424
      (anonymous function) @ (index):66
      dispatch @ jquery-1.8.3.min.js:2
      u @ jquery-1.8.3.min.js:2
  </code></pre>