Добавление функциональности в jQuery UI Datepicker

Question

Я получаю доступ к превосходному jQuery UI Datepicker.

Я пытаюсь показать календарь, который по умолчанию имеет значение от января до декабря текущего года, но позволяет пользователям перемещаться назад и вперед в течение многих лет.

У этого есть другие сложности - например, пользователь выбирает недели, а не дни; в свое время идея заключается в том, что она обеспечит навигацию для заполнения еженедельных расписаний, подчеркнув, какие расписания были заполнены/отправлены/одобрены - но это на другой день ...

Прямо сейчас, я могу показать полный год, и выделить на основе неделю за неделей, но я не могу включать другие требования, а именно:

1. перемещения назад и вперед через годы
2. установить по умолчанию «Jan-к-Dec из в текущем году ', а не «с января по декабрь 2016 года»
3. (менее важно) придать ему все более компактный вид

С не незначительному помощи от других, вот что у меня есть ...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"> 
<script type="text/javascript"> 
$(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({ 
     stepMonths: 12, 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     showWeek: true, 
     numberOfMonths: [4, 3], 
     minDate: new Date(2016, 1 -1, 1), 
     maxDate: new Date(2016, 12 -1, 31), 
     showButtonPanel: 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'); }); 
}); 
</script> 

Answer 1

MinDate и MaxDate решает диапазон дат, которые видны в календаре. Поскольку ваш диапазон охватывает весь год, вы не можете перейти на предыдущий или следующий год. Нет опции для установки по умолчанию Jan-Dec of the year, но мы можем внести некоторые изменения в код, чтобы получить это представление. Однако существует несогласованность при навигации к предыдущему или следующему году в jQuery UI версии 1.12. Я пробовал с jQuery UI 1.11.4 и jQuery 1.12.4, и он работает.

$(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({ 
     stepMonths: 12, 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     showWeek: true, 
     numberOfMonths: [4, 3], 
     showCurrentAtPos: new Date().getMonth(), //Shows the calendar from Jan to Dec 
     showButtonPanel: 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(); 
     }, 
     beforeShow: function(date,inst){ 
      // shows the calendar view from jan to dec of the selected year 
      if($(".week-picker").datepicker("getDate") != null){ // donot run on the first instance 
       $(".week-picker").datepicker("option", "showCurrentAtPos", inst.selectedMonth); 
      } 
     } 
    }); 

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

проверка выход здесь: https://jsbin.com/zopuke