Question

首先是有一种方法可以不突出显示当天。第二，是否有一种方法可以突出特定的日子，例如当天突出显示的方式？

这是我的代码：

<!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>

Answer 1

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

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

第二种方法可以突出显示特定日期，例如当天突出显示的方式吗？

是的，要么将当前日期突出显示的类添加到您想要突出显示的日期，要么使用.ui-state-highlight的样式覆盖CSS。

对于第一种方法，这是一个示例代码片段：

$('#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/。

Answer 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课程。现在，您需要为所选日期定义样式。有关完整指南，您可以查看上面提到的源链接。

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

2 个答案: