加载日期选择器时突出显示当前星期 [英] Highlight current week when datepicker is loaded

问题描述

我正在关注此jsFiddle ，以便可以从日期选择器中突出显示并选择整周.

通过将 .live() 更改为 .on() .这是经过编辑的 jsFiddle .它可以正常工作，但在当前状态下，仅当用户单击日期后才突出显示星期.

我要实现的是突出显示(并在startDate和endDate vars中填充日期)启动时自动将当前日期所属的一周而不单击当前日期.我已经尝试了以下方法，但是它似乎不起作用

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

有什么建议吗?

解决方案

尝试一下

$(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/

I am following this jsFiddle to be able to highlight and select whole week from datepicker.

I have customized it to work with jQuery 1.9 by changing .live() to .on(). Here is the edited jsFiddle. It works fine but in its current state the week is only highlighted once the user click on a date.

What I want to achieve is to highlight (and populate dates in startDate and endDate vars) the week to which current date belongs automatically on startup without clicking current date. I have tried the following but it doesn't seem to work

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

Any Suggestions?

解决方案

Try this

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

});

DEMO: http://jsfiddle.net/eFzG4/

这篇关于加载日期选择器时突出显示当前星期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！