Пытается реализовать еженедельное управление DateRangePicker

Question

Я работаю над проектом приложения ASP.NET MVC 5, и я хочу добавить текстовое поле в представление для хранения 7-дневного диапазона. Текстовое поле будет содержать два значка: один слева, а другой - в правой части текстового поля. Когда пользователь нажимает значок слева, текстовое поле будет обновляться, чтобы отобразить предыдущий 7-дневный период; когда пользователь нажимает следующий 7-дневный диапазон, текстовое поле будет обновляться, чтобы отобразить следующий 7-дневный период. Идеальный формат 7-дневного диапазона - «8/14/2016 - 8/20/2016». Я закончил рефакторинг решения, первоначально написанного для «jQuery v1.6.2»; приложение, которое я создаю, работает на «jQuery v2.2.3». Я заменил все функции v1.6.2, которые устарели. Устаревший код, из которого основано мое решение, можно найти на «http://igorzelmanovich.blogspot.com/2011/07/week-picker-using-jquery-ui-datepicker.html». Мой код в настоящее время настроен для отображения недельного диапазона дат в нескольких тегах span; однако я предпочитаю отображать недельный диапазон дат в текстовом поле, из которого запускается datepicker. Мой код указан ниже; Я заметил это, чтобы определить области, где я получаю значение и области, в которых я не:

$(function() { 

     var startDate; 
     var endDate; 

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

     var setDates = function (input) { 
      debugger; 
      var $input = $(input); 
      var date = $input.datepicker('getDate');//Set to date value selected in jQuery datepicker 
      var loIsDate = new Date(date);//loIsDate has a value, but its "_proto" property is set to "Invalid Date" 

      if (date != 'Invalid Date') { 
       var firstDay = $input.datepicker("option", "firstDay"); 
       var dayAdjustment = loIsDate.getDay() - firstDay;//Set to valid constant value 
       if (dayAdjustment < 0) { 
        dayAdjustment += 7; 
       } 
       startDate = new Date(loIsDate.getFullYear(), loIsDate.getMonth, loIsDate.getDate() - dayAdjustment);//set to "Invalid Date' 
       endDate = new Date(loIsDate.getFullYear(), loIsDate.getMonth(), loIsDate.getDate() - dayAdjustment + 6);//set to valid date 

       var dateFormat = $.datepicker.setDefaults({ 
        dateFormat: 'mm/dd/yy' 
       }); 

       $('#startDate').text($.datepicker.formatDate(dateFormat, startDate)); 
       $('#endDate').text($.datepicker.formatDate(dateFormat, endDate)); 
      } 
     } 

     $('.week-picker').datepicker({ 
      beforeShow: function() { 
       $('#ui-datepicker-div').addClass('ui-weekpicker'); 
       selectCurrentWeek(); 
      }, 
      onClose: function() { 
       $('#ui-datepicker-div').removeClass('ui-weekpicker'); 
      }, 
      showOtherMonths: true, 
      selectOtherMonths: true, 
      onSelect: function (dateText, inst) { 
       setDates(this); 
       selectCurrentWeek(); 
       $(this).change(); 
      }, 
      beforeShowDay: function (date) { 
       var cssClass = ''; 
       if (date >= startDate && date <= endDate) 
        cssClass = 'ui-datepicker-current-day'; 
       return [true, cssClass]; 
      }, 
      onChangeMonthYear: function (year, month, inst) { 
       selectCurrentWeek(); 
      } 
     }); 

     setDates('.week-picker'); 

     $('.ui-weekpicker .ui-datepicker-calendar tr').on('mousemove', function() { 
      $(this).find('td a').addClass('ui-state-hover'); 
     }); 

     $('.ui-weekpicker .ui-datepicker-calendar tr').on('mouseleave', function() { 
      $(this).find('td a').removeClass('ui-state-hover'); 
     }); 

    }); 

<div class="col-md-6" style="padding-right: 0px;"> 
        <div class="col-md-3" style="text-align:right; padding-top:0.5em;"> 
         <span>Time Period:</span> 
        </div> 
        <div class="col-md-1"> 
         <input type="image" src="~/Images/arrow-l.gif" alt="Previous Week" style="margin-top: 0.5em;" title="Previous Week" /> 
        </div> 
        <div class="col-md-7"> 
         <input id="timePeriodTextBox" type="text" class="form-control week-picker" style="width:8em;" /> 
         <span id="startDate"></span> - <span id="endDate"></span> 
        </div> 
        <div class="col-md-1"> 
         <input type="image" src="~/Images/arrow-r.gif" alt="Next Week" style="margin-top: 0.5em;" title="Next Week" /> 
        </div> 
       </div> 

Когда я запускаю программу и установите флажок, прикрепленный к DatePicker JQuery, то DatePicker действительно кажется, и я Можно выбрать дату. После выбора даты в текстовом поле появляется дата в формате «8/19/2016», но диапазон недельных дат не отображается в двух тегах span.

Заранее спасибо за помощь :-)

Answer 1

$(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; 
      $('#weekRangeTextBox').val($.datepicker.formatDate(dateFormat, startDate, inst.settings) 
       + ' - ' + $.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(); 
     } 
    }); 

    $('#nextWeekButton, #previousWeekButton').on('click', function (e) { 
     var date = $('.week-picker').datepicker('getDate'); 
     e.target.id == 'nextWeekButton' ? date.setDate(date.getDate() + 7) : date.setDate(date.getDate() - 7); 
     startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); 
     endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
     $('#weekRangeTextBox').val($.datepicker.formatDate("mm/dd/yy", startDate) 
       + ' - ' + $.datepicker.formatDate("mm/dd/yy", endDate)); 
    }); 
});