title: Bootstrap datepicker return focus after select
body: <p>If you initialize a <a href="https://github.com/eternicode/bootstrap-datepicker" rel="nofollow noreferrer">bootstrap datepicker from eternicode</a> with <code>autoclose: true</code>, two undesirable behaviors happen:</p>
  
  <ol>
  <li>After the picker closes, when you tab into the next field, you'll start at the beginning of the document again.  This can be quite cumbersome on long forms.</li>
  <li>Because the picker changes the value programatically, any listeners that you have that care about the blur event on the input won't behave properly.  The  blur actually occurs when you select the picker value and the input's value hasn't changed.  Then the bootstrap-datepicker programmatically updates the field so blur is never fired with the new value.</li>
  </ol>
  
  <p><strong>Here's a demo in stack snippets</strong>:<br>
  *select any field, select a value from the picker, and then hit <kbd>Tab</kbd></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".datepicker").datepicker({
    autoclose: true
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/&gt;
  
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"&gt;&lt;/script&gt;
  
  
  &lt;input type="text" class="datepicker" /&gt;&lt;br/&gt;
  &lt;input type="text" class="datepicker" /&gt;&lt;br/&gt;
  &lt;input type="text" class="datepicker" /&gt;&lt;br/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>According to the answer to <a href="https://stackoverflow.com/a/20755786/1366033">Focus the field after selecting the jQuery UI datepicker</a>,  you can tap into the <code>onClose</code> or <code>onSelect</code> events, but the <a href="http://bootstrap-datepicker.readthedocs.org/en/latest/events.html" rel="nofollow noreferrer">bootstrap picker doesn't offer those events</a>.</p>
  
  <p>Simply replacing them with <code>hide</code> doesn't seem to work either, since the refocusing will create an endless loop that always keeps the picker open any time you try to close it.</p>
  
  <pre class="lang-js prettyprint-override"><code>$(".datepicker").datepicker({
    autoclose: true
  })
  .on('hide', function () {
    $(this).focus();
  });
  </code></pre>
  
  <p><strong>Stack Snippet Demo</strong>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".datepicker").datepicker({
    autoclose: true
  })
  .on('hide', function () {
    $(this).focus();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/&gt;
  
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"&gt;&lt;/script&gt;
  
  
  &lt;input type="text" class="datepicker" /&gt;&lt;br/&gt;
  &lt;input type="text" class="datepicker" /&gt;&lt;br/&gt;
  &lt;input type="text" class="datepicker" /&gt;&lt;br/&gt;</code></pre>
  </div>
  </div>
  </p>