Question

我正在处理ASP.NET MVC 5应用程序项目，我想在视图中添加一个文本框以保存7天的范围。文本框将有两个图标，一个在左侧，另一个在文本框的右侧。当用户单击左侧的图标时，文本框将更新以显示前7天的时间段;当用户点击下一个7天范围时，文本框将更新以显示下一个7天期限。 7天范围的理想格式是＆＃34; 2016年8月14日 - 2016年8月20日＆＃34;。我最终重构了一个最初为“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日期选择器的框时，会出现日期选择器，并且我可以选择日期。选择日期后，日期格式为＆＃34; 8/19/2016＆＃34;出现在文本框中，但每周日期范围不会显示在两个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));
    });
});

试图实现每周DateRangePicker控件

1 个答案: