Question

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

将showCurrentAtPos更新为onChangeMonthYear处理程序中的选定月份。
在onSelect处理程序中更改showCurrentAtPos。
在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

尝试以下方法：

通过onSelect活动获取所选文字（与您一样）。
使用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" );
         }


    });

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

2 个答案: