Javascript Jquery UI日历-如何突出显示当前日期后的天数?
我在一个客户网站上工作,在我使用的网站上,我需要能够突出显示从当前日期后2天开始的3个工作日,但合并数学以不计算周末。这是我的小提琴: 这是HTMLJavascript Jquery UI日历-如何突出显示当前日期后的天数?,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,我在一个客户网站上工作,在我使用的网站上,我需要能够突出显示从当前日期后2天开始的3个工作日,但合并数学以不计算周末。这是我的小提琴: 这是HTML <input type="text" id='datepicker'> 我在向上面的代码添加之前遇到问题:$.datepicker.noWeekends。我还需要突出显示的3个日期是可变的,因此它们会根据当前日期的不同而变化,但我仍在学习JS,我不理解其背后的逻辑 我已经浏览了这个网站和其他网站,虽然有很多关于如何突出具体日期的问题
<input type="text" id='datepicker'>
我在向上面的代码添加之前遇到问题:$.datepicker.noWeekends
。我还需要突出显示的3个日期是可变的,因此它们会根据当前日期的不同而变化,但我仍在学习JS,我不理解其背后的逻辑
我已经浏览了这个网站和其他网站,虽然有很多关于如何突出具体日期的问题/答案,但没有一个完全适用于我正在尝试做的事情
因此,为了澄清这一点,我需要做一些数学运算,找出如何否定正念和周末,并突出接下来的三个工作日。更新 以下是一种方法:
var currentDay = new Date();
var dayOfWeek;
var highlighted = 0;
var count = 0;
var SelectedDates = {};
while(highlighted < 3){
dayOfWeek = currentDay.getDay();
if(dayOfWeek != 0 && dayOfWeek != 6){
if(count > 1){
alert(currentDay);
var month = currentDay.getMonth()+1;
if(month.toString().length < 2)
month = '0'+month;
var day = currentDay.getDate();
if(day.toString().length < 2)
day = '0'+day;
var year = currentDay.getFullYear();
var dateStr = month+"/"+day+"/"+year;
SelectedDates[new Date(dateStr)] = new Date(dateStr);
highlighted++;
}
else {
count++;
}
}
currentDay = new Date(currentDay.getTime() + (24 * 60 * 60 * 1000));
}
var currentDay=新日期();
var dayOfWeek;
var=0;
var计数=0;
var SelectedDates={};
while(突出显示<3){
dayOfWeek=currentDay.getDay();
if(dayOfWeek!=0&&dayOfWeek!=6){
如果(计数>1){
警报(当前日期);
var month=currentDay.getMonth()+1;
如果(月toString().长度<2)
月份='0'+月份;
var day=currentDay.getDate();
如果(day.toString().length<2)
天='0'+天;
var year=currentDay.getFullYear();
var dateStr=月+“/”+日+“/”+年;
所选日期[新日期(dateStr)]=新日期(dateStr);
突出显示++;
}
否则{
计数++;
}
}
currentDay=新日期(currentDay.getTime()+(24*60*60*1000));
}
例如:
这应该可以做到:
$(document).ready(function () {
var css, count = 0,
gap = 0,
today = new Date();
$('#datepicker').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
minDate: 2,
maxDate: "+4M +15D",
beforeShowDay: function (date) {
var day = date.getDay();
var diff = new Date(date - today);
var numDays = Math.ceil(diff / 1000 / 60 / 60 / 24);
if (numDays > 0 && count < 3) {
if (day != 6 && day != 0) {
gap++;
if (gap > 1) {
count++;
css = 'Highlighted';
} else css = '';
}
} else css = '';
return [(day != 6) && (day != 0), css]; //0-Sunday 6-Saturday
},
onSelect: function () {
count = 0;
gap = 0;
}
});
});
$(文档).ready(函数(){
变量css,计数=0,
差距=0,
今天=新日期();
$(“#日期选择器”)。日期选择器({
showOtherMonths:是的,
选择OtherMonths:true,
minDate:2,
最大日期:“+4M+15D”,
beforeShowDay:功能(日期){
var day=date.getDay();
var diff=新日期(日期-今天);
var numDays=数学单元(diff/1000/60/60/24);
如果(numDays>0&&count<3){
如果(天!=6&&day!=0){
gap++;
如果(间隙>1){
计数++;
css='突出显示';
}else css='';
}
}else css='';
return[(day!=6)&(day!=0),css];//0-星期日6-星期六
},
onSelect:function(){
计数=0;
差距=0;
}
});
});
为什么minDate设置为2?这会阻止某人选择明天。因为他们选择的日期是发货日期,而minDate:2基本上是处理时间。您希望突出显示星期五、星期一和星期二(今天是星期四),还是像小提琴一样突出显示星期一、星期二和星期三?你的问题是“当前日期后3个工作日”,但这与小提琴的例子不符。你能看看并告诉我这是否接近你想要的吗?这是怎么回事?您可以通过更改行today=newdate(),用其他日期对其进行测试代码>。例如,4月20日将是today=新日期(2014,3,20)代码>(月份以零为基础)。让我知道这是否是你所需要的,如果是的话,我会把它作为一个答案发布。我刚刚意识到,如果今天不是周末,你可能也想把今天算为一个工作日。我将更新我的帖子。@MatthewSechrest检查我的更新。不管是哪一天,它都会为你工作。好的,这很好!因此,如果当前日期是星期三,那么突出显示的日期会是星期五、星期一和星期二吗?@MatthewSechrest是的,看看这个模拟示例,注意您的代码行minDate:2被注释掉了。取消注释那一行,看看会发生什么。不管怎样,当你取消注释那一行时,星期五是灰色的,但那只是因为今天实际上是星期四。但如果它实际上是周三,那么它就不会变灰。所以不用担心。
$(document).ready(function () {
var css, count = 0,
gap = 0,
today = new Date();
$('#datepicker').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
minDate: 2,
maxDate: "+4M +15D",
beforeShowDay: function (date) {
var day = date.getDay();
var diff = new Date(date - today);
var numDays = Math.ceil(diff / 1000 / 60 / 60 / 24);
if (numDays > 0 && count < 3) {
if (day != 6 && day != 0) {
gap++;
if (gap > 1) {
count++;
css = 'Highlighted';
} else css = '';
}
} else css = '';
return [(day != 6) && (day != 0), css]; //0-Sunday 6-Saturday
},
onSelect: function () {
count = 0;
gap = 0;
}
});
});