在 jquery UI datepicker 中突出显示日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6857025/
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 jquery UI datepicker
提问by Nisanth Kumar
How i can use beforeShowDayfor highlighting days in jQuery UI datepicker. I have the following date array
我如何使用beforeShowDay在 jQuery UI 日期选择器中突出显示日期。我有以下日期数组
Array
(
[0] => 2011-07-07
[1] => 2011-07-08
[2] => 2011-07-09
[3] => 2011-07-10
[4] => 2011-07-11
[5] => 2011-07-12
[6] => 2011-07-13
)
回答by Nikita Ignatov
Have a look at the documentation.
看看文档。
beforeShowDayThe function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.
beforeShowDay该函数接受一个日期作为参数，并且必须返回一个数组，其中 [0] 等于 true/false 指示该日期是否可选，[1] 等于 CSS 类名或 '' 为默认值演示文稿，以及 [2] 此日期的可选弹出工具提示。在日期选择器中的每一天显示之前都会调用它。
This means that you need to create a function that will take a date and return an array of parameters where values are:
这意味着您需要创建一个函数，该函数将接受一个日期并返回一个参数数组，其中的值是：
- boolean - indicates if date can be selected
- string - name of the css class that will be aplied to the date
- string - an optional popup tooltip for this date
- boolean - 指示是否可以选择日期
- 字符串 - 将应用于日期的 css 类的名称
- 字符串 - 此日期的可选弹出工具提示
here is an example:
这是一个例子：
var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.
$('#whatever').datepicker({
beforeShowDay: function(date) {
// check if date is in your array of dates
if($.inArray(date, your_dates)) {
// if it is return the following.
return [true, 'css-class-to-highlight', 'tooltip text'];
} else {
// default
return [true, '', ''];
}
}
});
and now you can add the style to highlight the date
现在您可以添加样式以突出显示日期
<style>
.css-class-to-highlight{
background-color: #ff0;
}
</style>
回答by Nisanth Kumar
I solved the issue using
我解决了这个问题
var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"];
var date = new Date();
jQuery(document).ready(function() {
$( "#dateselector").datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: function(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
//return [false];
return [true, 'ui-state-active', ''];
}
}
return [true];
}
});
});
回答by Karan Sharma
Found the most voted answer not working. Updated the code little bit to make it working. $.inArray() mostly search for indexOf(). Also we can't compare two dates directly for equality. Reference : Compare two dates with JavaScript
发现投票最多的答案不起作用。稍微更新了代码以使其正常工作。$.inArray() 主要搜索 indexOf()。我们也不能直接比较两个日期是否相等。参考：使用 JavaScript 比较两个日期
function inArrayDates(needle, haystack){
var found = 0;
for (var i=0, len=haystack.length;i<len;i++) {
if (haystack[i].getTime() == needle.getTime()) return i;
found++;
}
return -1;
}
And update the accepted function as
并将接受的函数更新为
if(inArrayDates(date, markDates) != -1) {
return [true, 'selected-highlight', 'tooltip here'];
} else {
return [true, '', ''];
}
回答by Mark Mishyn
Dates in JS are instances of object Date, so you can't check properly if dates are equal using ==or ===.
JS 中的日期是 object 的实例Date，因此您无法使用==或正确检查日期是否相等===。
Simple solution:
简单的解决方案：
var your_dates = [
new Date(2017, 4, 25),
new Date(2017, 4, 23)
];
$( "#some_selector" ).datepicker({
beforeShowDay: function(date) {
are_dates_equal = d => d.getTime() === date.getTime();
if(your_dates.some(are_dates_equal)) {
return [true, 'ui-state-active', ''];
}
return [true, '', ''];
}
})
回答by S Debasish Nayak
I got a simple solution where only we have to give the dates which will be disabled and to show color for available dates.And it worked for me
我得到了一个简单的解决方案，只有我们必须给出将被禁用的日期并显示可用日期的颜色。它对我有用
<style>
.availabledate a {
background-color: #07ea69 !important;
background-image :none !important;
color: #ffffff !important;
}
</style>
And for script use this:
对于脚本使用这个：
<script>
$(function() {
//This array containes all the disabled array
datesToBeDisabled = ["2019-03-25", "2019-03-28"];
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
minDate : 0,
todayHighlight: 1,
beforeShowDay: function (date) {
var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
if(dateStr){
return [datesToBeDisabled.indexOf(dateStr) == -1,"availabledate"];
}else{
return [datesToBeDisabled.indexOf(dateStr) == -1,""];
}
},
});
});
</script>
Hope it may help someone.
希望它可以帮助某人。
回答by manubkk
http://jqueryui.com/demos/datepicker/#event-beforeShowDay
http://jqueryui.com/demos/datepicker/#event-beforeShowDay
You compare the date parameter in the beforeShowDay with the dates you have got in your array, and if there is a match you return an array as defined in the link above.
您将 beforeShowDay 中的日期参数与数组中的日期进行比较，如果匹配，则返回上面链接中定义的数组。
In the array you return from beforeShowDay, the second element is used to set the class name which will be used on the date, you can then use css to set styles for that class.
在从 beforeShowDay 返回的数组中，第二个元素用于设置将在日期上使用的类名，然后您可以使用 css 为该类设置样式。
