Question

我正在掌握精湛的jQuery UI Datepicker。

我试图显示默认为当年1月到12月的日历，但允许用户在这些年中向后和向前导航。

它有其他复杂性 - 例如用户选择周而不是天;在适当的时候，我们的想法是，它将提供导航，以完成每周的时间表，突出显示哪些时间表已完成/提交/批准 - 但这是另一天......

现在，我可以展示一整年，并逐周亮相，但我无法纳入其他要求，即：

多年来向后和向前导航
将默认设置设置为当前年份的“1月至12月”，而不是“2016年1月至12月”＆＃39;
（不太重要）给它一个更紧凑的外观

在没有其他人的帮助的情况下，这就是我所拥有的......

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(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( {
        stepMonths: 12,
        showOtherMonths: true,
        selectOtherMonths: true,
        showWeek: true,
        numberOfMonths: [4, 3],
        minDate: new Date(2016, 1 -1, 1),
        maxDate: new Date(2016, 12 -1, 31),
        showButtonPanel: 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;
            $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
            $('#endDate').text($.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();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>

Answer 1

minDate和maxDate决定日历中可见的日期范围。由于您的范围涵盖了整年，因此无法移至上一年或明年。没有提供设置默认的1月 - 12月的选项，但我们可以对代码进行一些更改以获得该视图。但是，在jQuery UI 1.12版中导航到上一年或明年时会出现不一致。我已经尝试过使用jQuery UI 1.11.4和jQuery 1.12.4并且它可以工作。

$(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( {
        stepMonths: 12,
        showOtherMonths: true,
        selectOtherMonths: true,
        showWeek: true,
        numberOfMonths: [4, 3],
        showCurrentAtPos: new Date().getMonth(), //Shows the calendar from Jan to Dec
        showButtonPanel: 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;
            $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
            $('#endDate').text($.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();
        },
        beforeShow: function(date,inst){
            // shows the calendar view from jan to dec of the selected year
            if($( ".week-picker" ).datepicker( "getDate" ) != null){ // donot run on the first instance
                $( ".week-picker" ).datepicker( "option", "showCurrentAtPos", inst.selectedMonth );
            }
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});

检查输出：https://jsbin.com/zopuke

向jQuery UI Datepicker

1 个答案: