尝试实现每周DateRangePicker控件

我正在做一个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标签中不显示每周日期范围。

提前感谢您的帮助:-)