jQuery UI Datepicker -如何让日历和输入字段的宽度相等？

uoifb46i 于 2023-11-17 发布在 jQuery

关注(0)|答案(2)|浏览(108)

**问题：**日历的宽度最初设置为与输入字段的宽度相同。但是，一旦单击上一个/下一个按钮（更改月份），日历宽度将重新设置。
**可能的解决方案：**使用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/

jquery

来源：https://stackoverflow.com/questions/49471165/jquery-ui-datepicker-how-to-have-equal-width-of-calendar-and-input-field

2条答案

按热度按时间

kuarbcqp1#

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

字符串

赞(0）回复(0）举报 2023-11-17

ax6ht2ek2#

在我的情况下，我有选择：

changeYear: true,
changeMonth: true,

字符串
为了使月份和年份作为选择输入，所以除了beforeShow，你需要使用onChangeMonthYear，否则当我们选择另一个年份或月份时，日历的宽度会回到原来的宽度，所以这里是我的完整代码

$( "#date_naissance" ).datepicker({
    changeYear: true,
    changeMonth: true,
    dateFormat: 'dd/mm/yy',
    yearRange: '1900:2050',
    beforeShow: function (input, inst) {
        console.log("before");
        console.log(input);
        console.log(inst);
        setTimeout(function(){
            inst.dpDiv.outerWidth($(input).outerWidth());
        },0);
    },
    onChangeMonthYear : function (year, month, inst) {
        setTimeout(function(){
            inst.dpDiv.outerWidth($(inst.input).outerWidth());
        },0);
    }
});

型

赞(0）回复(0）举报 2023-11-17

我来回答

jQuery UI Datepicker -如何让日历和输入字段的宽度相等？

2条答案

相关问题

热门标签

最新问答