gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 01:18:46 26 4
gpt4 key购买 nike

首先有一种方法可以不突出显示当前日期。其次,有没有一种方法可以像突出显示当前日期一样突出显示特定日期?

这是我的代码:

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

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

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

是的,可以将用于突出显示当前日期的类添加到您想要突出显示的日期,或者使用 .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/ .

关于jquery - 如何在日期选择器中突出显示选定的日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7504819/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com