[英]jQuery UI Datepicker - color dates after the selected date
I'm using the jQuery UI datepicker to allow the user to select a date. 我正在使用jQuery UI datepicker来允许用户选择日期。 I need to color 7 days after the selected date.
我需要在所选日期后7天着色。
For example, if the user has selected 1.1.2015
, the days 2.1.2015
to 8.1.2015
shall be colored upon click (on the 1.1.2015
). 例如,如果用户选择
1.1.2015
,天2.1.2015
至8.1.2015
,应在点击(在有色1.1.2015
)。 I was following this guide but I am not able to make this work. 我正在遵循本指南,但我无法完成这项工作。
Basically what I'm doing is creating an array of future dates (based on the calculation of milliseconds from the selected date + 86400000 milliseconds for each day), and then trying to apply css
class on this array. 基本上我正在做的是创建一个未来日期数组(基于所选日期的毫秒数+每天86400000毫秒的计算),然后尝试在此数组上应用
css
类。 Please advise. 请指教。
EDIT: 编辑:
Maybe I should have mentioned, but this picker is inline so the changes must take place instantly. 也许我应该提到,但这个选择器是内联的,因此必须立即进行更改。
EDIT2: EDIT2:
Here's an example via jsfiddle . 这是jsfiddle的一个例子。
JS: JS:
var arrayOfFollowingWeekDates = [];
var selectedStartingDate;
//date picker configuration
$('#datepicker').datepicker({
onSelect: function(dateText, inst){
selectedStartingDate = dateText;
var selectedDateAsObject = $(this).datepicker('getDate');
arrayOfFollowingWeekDates = calcFollowingtWeekDates(selectedDateAsObject);
if(selectedDateAsObject > new Date){
console.log(selectedStartingDate);
}else{
console.log("bad date.");
}
},
inline: true,
showOtherMonths: true,
beforeShowDay: function(day, date){
var day = day.getDay();
if (day == 5 || day == 6){
return [false, ""];
} else {
return [true, ""];
}
var highlight = arrayOfFollowingWeekDates[date];
if (highlight) {
return [true, "event", highlight];
} else {
return [true, '', ''];
}
}
});
//this creates an array of the desired week, based on date objects
function calcFollowingtWeekDates(selectedDateObj){
var followingWeek = [];
var tempArrayOfNextDates = [];
var selectedDateInMilliseconds = selectedDateObj.getTime();
console.log("selected date in milliseconds: "+selectedDateInMilliseconds);
tempArrayOfNextDates[0]=selectedDateInMilliseconds;
var day;
var prevDay=selectedDateInMilliseconds;
for(var i=0;i<7;i++){
tempArrayOfNextDates[i] = 86400000 + prevDay;
day = new Date(tempArrayOfNextDates[i]);
prevDay = tempArrayOfNextDates[i];
followingWeek[i]=day;
console.log("next day is : "+ day);
}
return followingWeek;
}
CSS: CSS:
.event a {
background-color: #42B373 !important;
background-image :none !important;
color: #ffffff !important;
}
Here is a working fiddle: http://jsfiddle.net/97L93a3h/2/ 这是一个工作小提琴: http : //jsfiddle.net/97L93a3h/2/
var selectedDay = new Date().getTime();
$('.datepicker').datepicker({
onSelect: function (date) {
selectedDay = $(this).datepicker('getDate').getTime();
},
beforeShowDay: function (date) {
var d = date.getTime();
if (d > selectedDay && d < selectedDay + 1 + 86400000 * 7) {
return [true, 'ui-state-highlight', ''];
} else {
return [true, ''];
}
}
});
Merge this method into your existing script. 将此方法合并到现有脚本中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.