如何突出显示日期选择器中的选定日期 [英] How To Highlight Selected Dates In Date Picker
问题描述
这是我的代码：
<！DOCTYPE html>
< html>
< head>
< link type =text / csshref =css / calendar-theme / jquery-ui-1.8.16.custom.css =stylesheet/>
< script type =text / javascriptsrc =js / jquery-1.6.2.min.js>< / script>
< script type =text / javascriptsrc =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 ：（$）
$（'＃datepicker'）click（function（）{
//将您选择的日期放入数据对象
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;
}
将/风格>
< / head>
< body>
< div id =datepickerstyle =float：left; margin：0 10px 0 0; font-size：72.5％;>< / div>
< div id =eventsstyle =float：left; font-size：10pt;>
< p>选择日历上的日期查看活动。< / p>
< / div>
< div style =clear：both>< / div>
< / body>
< / html>
方式不突出当前的一天。
是的，您可以通过删除 .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/.
这篇关于如何突出显示日期选择器中的选定日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
