在jQuery日期选择器中选择日期和高亮日期选择器
问题描述:
我试图在jQuery Datepicker中突出显示或更改日期范围的CSS。我希望用户能够点击开始日期和结束日期,并且同时突出显示该范围之间的所有日期。我可以在单击时创建该范围内的日期数组,但出于某种原因,我无法向其添加类来更改CSS。在jQuery日期选择器中选择日期和高亮日期选择器
我怎样才能把这个日期数组,然后添加一个CSS类到他们所有的来改变背景/突出显示?
任何帮助将不胜感激!
谢谢
答
好吧,假设你已经有用户在数组中选择日期。你可以使用'beforeShowDay'选项来指定一个函数,这个函数将在当前可见的月份中遍历每一天,然后你的函数可以将每个日期与你的数组进行比较,并在存在匹配的地方应用一个css类。
因此,例如,初始化像这样的日期选择器...
jQuery(".cal").datepicker({
beforeShowDay: checkDates
})
和功能checkDates()会是这个样子(假设你的数组称为dateArray ....
function checkDates(theDate){
for(i=0;i<dateArray.length;i++){
if(dateArray[i].valueOf()===thedate.valueOf()){
return [false,"cssClass","title"];
}else return [true,""]
}
})
如果日期包含在dateArray中,这将对日期应用类'cssClass'
return语句中的真/假位确定日期是否可选,并且标记'标题'的位是html标题属性(工具提示)
Nb。这比较日期到最接近的毫秒,所以你可能想修改它只是匹配天
答
我已经成功完成此日期选择器的日期和datepicker为迄今,所以我修改它为一个datepicker 。代码如下:
$(function() {
var today = new Date();
var thisYear = (today).getFullYear();
var fromDate = '1/1/2000' //this is the initial from date to set the datepicker range
var toDate = '1/7/2000' // this is the initial to date to set the datepicker range
//... initialize datepicker....
},
beforeShowDay: function(date){
//if the date is in range
if (date >= fromDate && date <= toDate) {
return [true, 'ui-individual-date', '']; //applies a css class to the range
}
else {
return [true, '', ''];
}
},
onSelect: function (dateText, obj) {
//sets the new range to be loaded on refresh call, assumes last click is the toDate
fromDate = toDate;
toDate = new Date(dateText);
$(".classDp1").datepicker("refresh");
$(".classDp2").datepicker("refresh");
},
每次刷新beforeShowDay函数时都会调用新的fromDate和toDate范围。让变量超出函数的范围并对其进行修改可以使CSS中的高亮显示适用于每次点击。
你好,Rainhide,你还有这个例子用于从日期到日期不同的日历吗? @rainhider – 2017-04-19 11:50:42