加载datepicker时突出显示当前周
我正在关注这个jsFiddle ，以便能够突出显示并从datepicker中选择整周。
我通过将.live()更改为.on()来定制它以使用jQuery 1.9。 这是编辑过的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/
你也可以在当天触发点击
$(".ui-datepicker-current-day").click();