週を選択するオプション/日付ピッカーを提供

Question

これは基本的な質問かもしれませんが、私はこの要求にどのようにアプローチできるかを知る必要があります。 私たちは毎週月曜日にselfauditを実行し、詳細を示すためにチャートを作成しています。ユーザーには、特定の日付ではなく1週間を選択するオプションがあります。
このオプションを実装するにはどうすればいいですか
1）月曜日（日付付き）を最新のものから最も古いものまで表示する選択肢リストがあります。
2）月曜日のみ有効なdatepickerを使用できますか？ - これは、私はそれを失望させるよりも、日付ピッカーの他の日付を隠すことができますか？私はタイムピッカーのアドオン（http://trentrichardson.com/examples/timepicker/）でjquery datepickerを使用しています。

どのようにこの要件にアプローチしますか？事前に
おかげ

Answer 1

通常、これが処理される方法は、ユーザが任意の日付を選択し、自動的に選択された日付を含める週間以内にすべての日付を選択できるようにすることです。 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'); }); 
});