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

更新时间：2022-10-18 09:45:46

方式不突出当前的一天。

是的，您可以通过删除 .ui-state-highlight 和 .ui-state-hover 来自锚点元素的类。

第二个方法是突出显示特定的日子，就像今天突出显示的那样？

是的，添加类突出显示当前日期您想要突出显示的那些日期，或者用 .ui-state-highlight 的风格覆盖CSS。

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

  $（'＃datepicker'）。datepicker（{ 
 numberOfMonths：[1，1]，
 beforeShowDay：highlightDays 
}）click（function（）{
 // question 1 
 $（' datepicker-today a'，$（this）.next（））removeClass（'ui-state-highlight ui-state-hover'）; 

 //问题2 
 $（ '.highlight a'，$（this）.next（））。addClass（'ui-state-h ighlight'）; 
}）;

查看第一种方法： http://jsfiddle.net/william/Aut9b 。
请参阅第二种方法： http://jsfiddle.net/william/Aut9b/1 / 。

First is there a way to not highlight the current day. Second is there a way to highlight specific days like the way the current day was highlighted?

Here is the code i have:

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

First is there a way to not highlight the current day.

Yes, you can take away the highlighting by removing .ui-state-highlight and .ui-state-hover classes from the anchor element.

Second is there a way to highlight specific days like the way the current day was highlighted?

Yes, either add the classes for highlighting the current day to those days you want to have highlighted, or override the CSS with .ui-state-highlight's style.

For the first approach, here's an example code snippet:

$('#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');
});

See the first approach in action: http://jsfiddle.net/william/Aut9b. See the second approach in action: http://jsfiddle.net/william/Aut9b/1/.

上一篇 : ：如何在计算机启动时运行我的WinForm应用程序下一篇 : 每个类别排名前2位

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

相关阅读

技术问答最新文章