尝试实现每周 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”找到。我的代码当前设置为在几个跨度标签中显示每周日期范围；但是，我更喜欢在启动日期选择器的文本框中显示每周日期范围。我的代码在下面列出；我已经评论它以确定我获得价值的领域和我没有获得价值的领域：

    $(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”的日期，但两个跨度标签中不会显示每周日期范围。

提前感谢您的帮助:-)

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));
    });
});