$(document).ready(function() 干扰日期选择器显示？

Question

我有一个日期选择器被修改为只显示月份和年份。有用。但是，当我添加$(document).ready(function() 来设置页面首次打开时的当前月份和年份时，只有左右箭头（下个月和上个月）选项可用（没有下拉菜单；没有其他按钮）。有什么问题？

JS：

$( document ).ready(function() {
  $("#datepicker").datepicker({dateFormat: 'MM yy'}).datepicker("setDate", new Date());
});

$(function() {
  $( "#datepicker" ).datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    onClose: function(dateText, inst) { 
      $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    }
  });
});

HTML：

<input type="text" id="datepicker" name="datepicker" style="color: #595959;" onclick="function1();function2();" onchange="function3()" />

Answer 1

问题是因为您在元素上定义了一个日期选择器，然后立即用另一个具有不同设置的实例覆盖它。如果您只想设置默认日期值，您可以在 datepicker 的单个实例上的单个 document.ready 处理程序中执行此操作。

另请注意，您的 onClose 设置是多余的，因为该代码块中的逻辑无论如何都是插件的默认行为。

试试这个：

$(function() {
    var defaultDate = new Date(); // = today

    $('#datepicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        defaultDate: defaultDate, // set the default date of the picker
    }).datepicker('setDate', defaultDate); // set the text date value of the input

    // other code to run on document.ready...
});

Working example