使用 jQuery 的日期选择器突出显示特定范围内的日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2385332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlight dates in specific range with jQuery's datepicker
提问by Mike
I need to highlight the dates between a start date and an end date, which I should be able to specify. Can anyone help me?
我需要突出显示开始日期和结束日期之间的日期，我应该能够指定。谁能帮我？
回答by Dave Archer
You can use the beforeShowDay event. It will get called for each date that needs to be shown in the calendar. It passes in a date and return an array with [0]= isSelectable, 1= cssClass, [2]=Some tooltip text
您可以使用beforeShowDay 事件。它将为需要在日历中显示的每个日期调用。它传入一个日期并返回一个数组，其中 [0]= isSelectable, 1= cssClass, [2]=Some tooltip text
$('#whatever').datepicker({
beforeShowDay: function(date) {
if (date == myDate) {
return [true, 'css-class-to-highlight', 'tooltipText'];
}
}
});
回答by Mike
Here's a working example! You will nees to make a package from here with http://jqueryui.com/downloadwith core, widget and datepicker.
这是一个工作示例！您需要从这里使用http://jqueryui.com/download制作一个带有核心、小部件和日期选择器的软件包。
The javascript part to put before :
要放在之前的 javascript 部分：
<script>
$(document).ready(function() {
var dates = ['22/01/2012', '23/01/2012']; //
//tips are optional but good to have
var tips = ['some description','some other description'];
$('#datepicker').datepicker({
dateFormat: 'dd/mm/yy',
beforeShowDay: highlightDays,
showOtherMonths: true,
numberOfMonths: 3,
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates[i]).toString() == date.toString()) {
return [true, 'highlight', tips[i]];
}
}
return [true, ''];
}
});
</script>
The HTML part:
HTML部分：
<div id="datepicker"></div>
Add somewhere this CSS:
在某处添加此 CSS：
td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important; border: 1px #88a276 solid !important;}
And you will need to make a small image called bg.png to make it work
您需要制作一个名为 bg.png 的小图像才能使其工作
回答by Mark Murphy
Thought I would throw in my two cents as it seems faster and more light weight than others:
我想我会投入我的两分钱，因为它似乎比其他人更快、更轻：
jQuery(function($) {
var dates = {
'2012/6/4': 'some description',
'2012/6/6': 'some other description'
};
$('#datepicker').datepicker({
beforeShowDay: function(date) {
var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
if (search in dates) {
return [true, 'highlight', (dates[search] || '')];
}
return [false, '', ''];
}
});
});
回答by Angelo Bernardi
Not sure if this will be still useful, but as this was useful to me, I want to share what I did:
不确定这是否仍然有用，但由于这对我有用，我想分享我所做的：
In my JavaScript:
在我的 JavaScript 中：
var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"];
$("#SomeID").datepicker({ beforeShowDay: highLight });
function highLight(date) {
for (var i = 0; i < holidays.length; i++) {
if (new Date(holidays[i]).toString() == date.toString()) {
return [true, 'ui-state-holiday'];
}
}
return [true];
}
And in the jquery-ui-theme.css I've added
在我添加的 jquery-ui-theme.css 中
.ui-state-holiday .ui-state-default {
color: red;
}
If you want to highlight weekends also, you have to use this CSS instead
如果您还想突出显示周末，则必须改用此 CSS
.ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default {
color: red;
}
And this is the result:
这是结果：
(Note that I have configured my language to spanish, but this is not important to this code)
（请注意，我已将我的语言配置为西班牙语，但这对这段代码并不重要）
回答by Ben
Late to the party, but here's a JSFiddle that I used to test:
聚会迟到了，但这是我用来测试的 JSFiddle：
https://jsfiddle.net/gq6kdoc9/
https://jsfiddle.net/gq6kdoc9/
HTML:
HTML：
<div id="datepicker"></div>
JavaScript:
JavaScript：
var dates = ['11/13/2017', '11/14/2017'];
//tips are optional but good to have
var tips = ['some description', 'some other description'];
$('#datepicker').datepicker({
dateFormat: 'dd/mm/yy',
beforeShowDay: highlightDays,
showOtherMonths: true,
numberOfMonths: 3,
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates[i]).toString() == date.toString()) {
return [true, 'highlight', tips[i]];
}
}
return [true, ''];
}
And CSS:
和 CSS：
td.highlight {
border: none !important;
padding: 1px 0 1px 1px !important;
background: none !important;
overflow: hidden;
}
td.highlight a {
background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
border: 1px #88a276 solid !important;
}
Built on Mike's working example above!
建立在 Mike 上面的工作示例之上！
回答by a_fan
回答by Todd
mugur, your code didn't quite work for me in Firefox or Safari, it required the datevar to be formatted (which I got from here). Here
mugur，您的代码在 Firefox 或 Safari 中不太适合我，它需要对datevar 进行格式化（这是我从这里获得的）。这里
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
var d = date.getDate();
var m = date.getMonth();
m += 1; // JavaScript months are 0-11
var y = date.getFullYear();
var dateToCheck = (d + "/" + m + "/" + y);
if (dates[i] == dateToCheck) {
return [true, 'highlight', tips[i]];
}
}
return [true, ''];
}
And, of course, as the above function stands it doesn't account for leading-zeroes padding so the datesarray needed to be changed to:
而且，当然，正如上面的函数所代表的那样，它没有考虑前导零填充，因此dates需要将数组更改为：
var dates = ['22/1/2014', '23/1/2014'];
