title: jQuery Datepicker Format Date on Manual Input
body: <p>I have a jQuery datepicker with format: dd-MM-yyyy.</p>
  
  <p>By default the datepicker converts dates such as <em>1-2-3</em> and <em>1-2-99</em> to <em>01-02-2003</em> and <em>01-02-1999</em> respectively. However, this is only the case when you press enter or choose the date from the datepicker. I tried to auto format the field when leaving the field by using:</p>
  
  <pre><code>$j('.datepicker').live('blur', function(){
      $j(this).datepicker('setDate', $j(this).datepicker('getDate'));
  });
  </code></pre>
  
  <p>In this case I am using the utility function setDate and getDate of the Datepicker itself. This works when you enter the date by using your keyboard and using the TAB-key for example. However, the blur trigger also activates when you try to pick the date with your mouse. Therefore you have to choose the date twice with your mouse, because the first one the blur event sets the old value back.</p>
  
  <p>Is there any event I am missing I can use?</p>
  
  <p><strong>Workaround</strong></p>
  
  <p>Not very elegant but it is a partial solution:</p>
  
  <pre><code>var timeout;
  $j('#geboortedatum').live('keypress', function() {
      if(timeout) {
          clearTimeout(timeout);
          timeout = null;
      }
      timeout = setTimeout(formatDate, 1000);
  });
  
  function formatDate() {
      var gebdat = $j('#geboortedatum').val();
      var dashCount = gebdat.split('-').length - 1;
      if(dashCount == 2 &amp;&amp; gebdat.length &gt;= 5) {
          $j('#geboortedatum').datepicker('setDate', $j('#geboortedatum').datepicker('getDate'));
      }
  }
  </code></pre>