加载日期选择器时突出显示当前周答案

【问题标题】：Highlight current week when datepicker is loaded加载日期选择器时突出显示当前周
【发布时间】：2013-02-03 14:02:26
【问题描述】：

我正在关注this jsFiddle，以便能够从日期选择器中突出显示并选择整周。

我已通过将.live() 更改为.on() 对其进行了定制，使其与jQuery 1.9 一起使用。这是编辑后的jsFiddle。它工作正常，但在当前状态下，只有在用户单击日期时才会突出显示该周。

我想要实现的是在启动时自动突出显示（并在 startDate 和 endDate 变量中填充日期）当前日期所属的星期，而无需单击当前日期。我尝试了以下方法，但似乎不起作用

var currentDate = $(".week-picker").datepicker("getDate");
var onSelectFunction = $(".week-picker").datepicker("option","onSelect");

var format  = $(".week-picker").datepicker( "option", "dateFormat" );

var currDate = $.datepicker.formatDate(format,currentDate)
onSelectFunction( currDate );

有什么建议吗？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

试试这个

$(function () {
    var startDate;
    var endDate;

    var selectCurrentWeek = function () {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }
    var $weekPicker = $('.week-picker');

    function updateWeekStartEnd() {
        var date = $weekPicker.datepicker('getDate') || new Date();
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
    }

    updateWeekStartEnd();

    function updateDateText(inst) {
        var dateFormat = inst != 'start' &&  inst.settings.dateFormat ? inst.settings.dateFormat : $.datepicker._defaults.dateFormat;

        console.log( dateFormat)
        $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
        $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
    }

    updateDateText('start');

    $weekPicker.datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function (dateText, inst) {
            updateWeekStartEnd();
            updateDateText(inst);
            selectCurrentWeek();
        },
        beforeShowDay: function (date) {
            var cssClass = '';
            if (date >= startDate && date <= endDate) cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function (year, month, inst) {
            selectCurrentWeek();
        }
    });

    selectCurrentWeek();

    $('.week-picker .ui-datepicker-calendar tr').on('mousemove', function () {
        $(this).find('td a').addClass('ui-state-hover');
    });
    $('.week-picker .ui-datepicker-calendar tr').on('mouseleave', function () {
        $(this).find('td a').removeClass('ui-state-hover');
    });

});

演示：http://jsfiddle.net/eFzG4/

【讨论】：

这正是我想要的。但有时我还需要选择一个日期。用户将选择日期范围或特定日期。我怎样才能让它在这方面发挥作用？
@Murali 添加一组收音机或复选框应该相当容易，因此用户可以选择整周或一天。如果它处于白天模式，则不要运行上面的任何“周”代码
用firstDay: 1试试这个，它不能正常工作。
@lejon 你需要调整updateWeekStartEnd()

【解决方案2】：

你也可以在当天触发点击

$(".ui-datepicker-current-day").click();

【讨论】：