选择日期时保持内联全年日期选择器日历不移动

Question

我正在使用jQuery UI - Custom widget - Datepicker to Whole Year Calendar 中概述的方法来显示全年日历。每当我点击一个日期时，日历就会滚动以在位置 0 处显示点击日期的月份。我希望日历在我选择日期时保持在原位。我尝试了以下方法，但无济于事，以防止日历移动：

1. 在 onChangeMonthYear 处理程序中将 showCurrentAtPos 更新为所选月份。
2. 在 onSelect 处理程序中更改 showCurrentAtPos。
3. 在 onSelect 处理程序中将实际日期设置为当年的第一天。

选项 1 不起作用，因为 onChangeMonthYear 仅在单击上一个和下一个链接以更改月份而不是在选择日期时调用。

选项 2 似乎是在重新渲染日历之前设置值。

选项 3 失败的原因与选项 2 相同。

Answer 1

到目前为止，我能找到的唯一解决方案是在 onSelect 处理程序的末尾执行以下代码：

var parts = dateText.split('-');
setTimeout(function() {
    // This timeout keeps the calendar from moving around and shifting
    // the first month from january to the currently selecte month.
    // For some reason it keeps the red date as the intended one.
        $weeklycalendar.datepicker('setDate', parts[0]+'-01-01');
}, 0);

这显然是一个脆弱的解决方案，因为它取决于比赛条件和时间。如果超时功能触发得太快，它会中断，如果触发太晚，则会导致视觉跳跃。

Answer 2

尝试以下方法：

1. 通过onSelect 事件获取所选文本（就像您已经做的那样）。
2. 使用beforeShow 事件将日期设置为年初。

这样，每次单击日期选择器都会显示，并从 1 月 1 日开始。 缺点：单击日期选择器后，先前选择的值将被覆盖。

类似于下面的代码：

$( "#datepicker" ).datepicker({
        numberOfMonths: 12,
        defaultDate: "01/01/12",
        onSelect: function(dateText,inst) {
            console.log("This is currently selected date: " + dateText);

        },
        beforeShow: function(input, inst) { 
            $( "#datepicker" ).datepicker( "setDate" , "01/01/12" );
         }


    });