title: Bootstrap datepicker auto collapse when click different id
body: <p>I have the following code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="text" value="2014-10-13" class="input-small datepicker" id="beginDate"&gt;
  &lt;input type="text" value="2014-10-13" class="input-small datepicker" id="endDate"&gt;
  
  &lt;script type="text/javascript"&gt;
      $('#beginDate').datepicker().on('changeDate', function(){
         $('#beginDate').datepicker('hide');
      });
      $('#endDate').datepicker().on('changeDate', function(){
         $('#endDate').datepicker('hide');
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I've followed this <a href="http://www.eyecon.ro/bootstrap-datepicker/" rel="nofollow">tutorial</a> and had success to collapse datepicker when datachange or an user clicks outside of datepicker panel, but I have problem to auto collapse datepicker when user click on <code>endDate</code> then directly click on <code>beginDate</code>.</p>
  
  <p>It's something like <a href="http://jsfiddle.net/kmbo576p/" rel="nofollow">this</a>, although I don't use same source.</p>
  
  <p>The datepicker <code>beginDate</code> just in top of datepicker <code>endDate</code> (endDate datepicker not collapse) but in abode link it's not happen (able to collapse automatically). </p>
  
  <p>I've tried to modify my script like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
      $('#beginDate').datepicker()
         .on('show', function() {
            $('#endDate').datepicker('hide');
         });
         .on('changeDate', function(){
            $('#beginDate').datepicker('hide');
          });
      $('#endDate').datepicker().on('changeDate', function(){
         $('#endDate').datepicker('hide');
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>But it mess everything. Any idea what I'm missing?</p>