加亮选择日期选择器的当前周

我正在关注this 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);

任何建议？

来源

2013-02-03 ZedBee

试试这个

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

来源

2013-02-03 15:58:41 charlietfl

感谢很多:) – ZedBee

这正是我所期待的。但我也需要选择一些日期。用户将选择日期范围或特定日期。我怎样才能使它在这个工作？ –

@Murali应该相当容易添加一组收音机，或一个复选框，以便用户可以选择整个星期或一天。然后，如果它处于白天模式，则不运行上面的任何“星期”代码 – charlietfl

你也可以触发点击当前日期

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

来源

2013-08-12 14:52:20 r043v

这是一个[小提琴]（http://jsfiddle.net/2zGXv/10/）演示这个... –

加亮选择日期选择器的当前周

回答

相关问题