加亮選擇日期選擇器的當前周

我正在關注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/）演示這個... –

加亮選擇日期選擇器的當前周

回答

相關問題