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

Question

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

3

首先，有没有一种方法不要突出显示当前日期。第二个问题是是否有一种方法突出显示特定的日期，就像当前日期被突出显示的方式一样？

这是我拥有的代码：

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

- user875293

2个回答

1

使用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类。现在，您需要定义所选日期的样式。有关完整指南，请查看上面提到的源链接。

- JoyGuru

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- William Niu · Accepted Answer

首先，有没有一种方法可以不突出显示当前日期。

是的，您可以通过从锚元素中删除.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/。