title: jQuery UI Datepicker - How to have equal width of calendar and input field?
body: <p><strong>PROBLEM:</strong> Initially width of calendar is set to be the same as of input field. However, once clicked on prev/next buttons (to change month), calendar width will reseted.</p>
  
  <p><strong>POSSIBLE SOLUTION:</strong> Using onChangeMonthYear function like this one, but its not working:</p>
  
  <pre><code>onChangeMonthYear: function() {
      $('#ui-datepicker-div').outerWidth($('#thedate').outerWidth());
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="box"&gt;
    &lt;input id="thedate" type="text" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(function(){
  
      $('#thedate').datepicker({
          dateFormat: 'dd-mm-yy',
          beforeShow: function (input, inst) {
              setTimeout(function() {
                  inst.dpDiv.outerWidth($('#thedate').outerWidth());
              },0);
          },
      });
  
  });
  </code></pre>
  
  <p><strong>JSFIDDLE:</strong> <a href="http://jsfiddle.net/63x6t1d5/" rel="nofollow noreferrer">http://jsfiddle.net/63x6t1d5/</a></p>