JQuery UI日期选择器-如何使日历和输入字段的宽度相等？ [英] jQuery UI Datepicker - How to have equal width of calendar and input field?

问题描述

问题：最初日历的宽度设置为与输入字段相同。但是，一旦单击"上一步"/"下一步"按钮(更改月份)，日历宽度将重置。

可能的解决方案：使用onChangeMonthYear函数，但它不起作用：

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/

推荐答案

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());
  });
});

这篇关于JQuery UI日期选择器-如何使日历和输入字段的宽度相等？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！