주 선택을위한 옵션/datepicker 제공

Question

이것은 기본 질문 일 수 있지만이 요구 사항에 어떻게 접근 할 수 있는지 알아야합니다. 우리는 매 월요일마다 selfaudit을 실행하고 세부 사항을 보여주는 도표를 개발 중입니다. 사용자는 특정 날짜가 아닌 일주일을 선택할 수있는 옵션을 갖습니다.
이 옵션을 구현하는 방법
1) 가장 최근의 날짜부터 가장 오래된 날짜까지의 월요일 (날짜 포함)을 표시하는 선택 옵션 목록을 가질 수 있습니다.
2) 월요일에만 사용할 수있는 datepicker를 사용할 수 있습니까? - 이것 때문에 나는 날짜 위 치에서 다른 날짜를 그냥 숨길 수 있습니까? timepicker addon (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'); }); 
});