如何在日期选择器中突出显示选定的日期答案

【问题标题】：How To Highlight Selected Dates In Date Picker如何在日期选择器中突出显示选定的日期
【发布时间】：2011-09-21 18:32:58
【问题描述】：

首先有一种方法可以不突出显示当天。其次，有没有办法像突出显示当天一样突出特定日期？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>


<script type="text/javascript">
var dates = [new Date(2011, 9 - 1, 19),
             new Date(2011, 9 - 1, 20),
             new Date(2011, 9 - 1, 20),
             new Date(2011, 9 - 1, 21),
             new Date(2011, 10 - 1, 31)];

$(function() {

    $('#datepicker').datepicker({
        numberOfMonths: [1, 1],
        beforeShowDay: highlightDays,
    });


    $('#datepicker').click(function() {
        // put your selected date into the data object
        var data = $('#datepicker').val();

        $.get('getdata.php?date=' + data, function(data) {
            $('#events').html(data).show('slow');
        });
    });

    function highlightDays(date) {
        for (var i = 0; i < dates.length; i++) {
            if (dates[i].getTime() == date.getTime()) {
                return [true, 'highlight'];
            }
        }
        return [true, ''];
    }
});
</script>

<style>
#highlight, .highlight {
    background-color: #000000;
}
</style>  

</head>
<body>


<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div>

<div id="events" style="float:left;font-size: 10pt;">
<p>Select a date on the calendar to see events.</p>
</div>

<div style="clear:both"></div>
</body>
</html>

【问题讨论】：

标签： jquery jquery-ui datepicker

【解决方案1】：

首先有一种方法可以不突出显示当天。

是的，您可以通过从锚元素中删除 .ui-state-highlight 和 .ui-state-hover 类来取消突出显示。

其次，有没有办法像突出显示当天一样突出特定日期？

是的，或者将用于突出显示当天的类添加到您想要突出显示的那些日子，或者使用.ui-state-highlight 的样式覆盖 CSS。

对于第一种方法，这里有一个示例代码 sn-p：

$('#datepicker').datepicker({
    numberOfMonths: [1, 1],
    beforeShowDay: highlightDays
}).click(function() {
    // question 1
    $('.ui-datepicker-today a', $(this).next()).removeClass('ui-state-highlight ui-state-hover');

    // question 2
    $('.highlight a', $(this).next()).addClass('ui-state-highlight');
});

查看第一种方法：http://jsfiddle.net/william/Aut9b。查看第二种方法的实际应用：http://jsfiddle.net/william/Aut9b/1/。

【讨论】：

我知道这已经有几年的历史了，但是如果文本框上有一个 AJAX 日历扩展器，有没有办法做到这一点？我已经搜索了好几天，并在这里发布了一些问题，并尝试这样做。

【解决方案2】：

使用 jQuery UI 日期选择器的 beforeShowDay 选项来突出显示日期选择器中的选定日期。这里是简单的代码：

$( function() {
    // An array of dates
    var eventDates = {};
    eventDates[ new Date( '08/07/2016' )] = new Date( '08/07/2016' );
    eventDates[ new Date( '08/12/2016' )] = new Date( '08/12/2016' );
    eventDates[ new Date( '08/18/2016' )] = new Date( '08/18/2016' );

    // datepicker
    $('#datepicker').datepicker({
        beforeShowDay: function( date ) {
            var highlight = eventDates[date];
            if( highlight ) {
                return [true, "event", 'Tooltip text'];
            } else {
                return [true, '', ''];
            }
        }
    });
});

上面的 JavaScript 将在选定的日期添加 event 类。现在您需要定义选定日期的样式。如需完整指南，您可以查看上面提到的源链接。

【讨论】：