如何在日期选择器中突出显示选定的日期 [英] How To Highlight Selected Dates In Date Picker

查看：22 发布时间：2022/1/5 13:26:35 jquery jquery-ui datepicker

本文介绍了如何在日期选择器中突出显示选定的日期的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先有没有办法不突出显示当天.其次，有没有办法像突出显示当天那样突出显示特定日期?

这是我的代码:

<头><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 日期 = [新日期(2011, 9 - 1, 19),新日期(2011, 9 - 1, 20),新日期(2011, 9 - 1, 20),新日期(2011, 9 - 1, 21),新日期(2011, 10 - 1, 31)];$(函数(){$('#datepicker').datepicker({numberOfMonths: [1, 1],beforeShowDay:highlightDays，});$('#datepicker').click(function() {//将您选择的日期放入数据对象中var data = $('#datepicker').val();$.get('getdata.php?date=' + data, function(data) {$('#events').html(data).show('slow');});});功能亮点日(日期){for (var i = 0; i <风格>#highlight, .highlight {背景色:#000000；}</风格><身体><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>在日历上选择一个日期以查看事件.</p>

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

解决方案

首先有没有办法不突出显示当天.

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

<块引用>

第二，有没有办法像突出显示当天一样突出显示特定日期?

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

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

$('#datepicker').datepicker({numberOfMonths: [1, 1],beforeShowDay:highlightDays}).点击(功能(){//问题 1$('.ui-datepicker-today a', $(this).next()).removeClass('ui-state-highlight ui-state-hover');//问题2$('.highlight a', $(this).next()).addClass('ui-state-highlight');});

查看第一种方法: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/.

这篇关于如何在日期选择器中突出显示选定的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在日期选择器中突出显示选定的日期 [英] How To Highlight Selected Dates In Date Picker

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何在日期选择器中突出显示选定的日期 [英] How To Highlight Selected Dates In Date Picker

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭