2012-03-31 114 views
2


這可能是一個基本問題,但我需要知道我該如何處理這個需求。 我們在每個星期一運行自動審覈,並且正在開發一個圖表來顯示詳細信息。用戶可以選擇不選擇特定的日期,但選擇一個星期。
我怎樣才能實現這個選項
1)我可以有一個選擇選項列表顯示從最近到最舊的星期一(帶日期)。
2)我可以有隻有星期幾啓用日期選擇器? - 爲此,我可以隱藏日期選擇器中的其他日期而不是使其變爲晦澀狀態?我正在使用jQuery的datepicker與timepicker插件(http://trentrichardson.com/examples/timepicker/)。
提供一個選項/日期選擇器來選擇一週

我該如何處理此要求?
由於提前

回答

2

這通常的處理方式是讓用戶選擇的任何日期,然後自動選擇包括所選擇的日期在本週內所有日期。有一個示例說明如何使用http://www.tikalk.com/incubator/week-picker-using-jquery-ui-datepicker上的默認JQuery日期選擇器。

相關的腳本是:

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

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

    $('.week-picker').datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     onSelect: function(dateText, inst) { 
      var date = $(this).datepicker('getDate'); 
      startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); 
      endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
      var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; 
      $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings)); 
      $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings)); 

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

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

感謝驚人的解決方案。 – 2012-05-21 18:39:47

相關問題