试图实现每周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标签中显示每周日期范围;但是，我更喜欢在启动日期选择器的文本框中显示每周日期范围。我的代码列在下面;我评价它来识别在那里我得到的价值观和地区的地区在那里我不是：

$(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> 

当我运行程序，并单击连接到jQuery的日期选择器的框，日期选择器确实出现了和我能够选择一个日期。选择日期后，格式为“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)); 
    }); 
});