jqueryjquery-uidatepickerjquery-ui-datepicker

jQuery UI Datepicker - How to have equal width of calendar and input field?


PROBLEM: 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.

POSSIBLE SOLUTION: Using onChangeMonthYear function like this one, but its not working:

onChangeMonthYear: function() {
    $('#ui-datepicker-div').outerWidth($('#thedate').outerWidth());
}

HTML:

<div class="box">
  <input id="thedate" type="text" />
</div>

JS:

$(function(){

    $('#thedate').datepicker({
        dateFormat: 'dd-mm-yy',
        beforeShow: function (input, inst) {
            setTimeout(function() {
                inst.dpDiv.outerWidth($('#thedate').outerWidth());
            },0);
        },
    });

});

JSFIDDLE: http://jsfiddle.net/63x6t1d5/


Solution

  • http://jsfiddle.net/cafp58w6/8/

    $(function(){
      $('#thedate').datepicker({
        dateFormat: 'dd-mm-yy',
        beforeShow: function (input, inst) {
          setTimeout(function() {
            inst.dpDiv.outerWidth($('#thedate').outerWidth());
          }, 0);
        },
      });
    
      $('div.ui-datepicker').on('click',function(){
        $(this).outerWidth($('#thedate').outerWidth());
      });
    });