如何使用 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
)
【问题讨论】：
标签： jquery jquery-ui jquery-plugins
查看文档。
beforeShowDay 该函数将日期作为参数，并且必须返回一个数组，其中 [0] 等于 true/false 指示此日期是否可选，[1] 等于 CSS 类名称或'' 用于默认演示，[2] 此日期的可选弹出工具提示。日期选择器中的每一天都会在显示之前调用它。
这意味着您需要创建一个函数，该函数将接受一个日期并返回一个参数数组，其中值是：
这是一个例子：
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, '', ''];
}
}
});
现在您可以添加样式以突出显示日期
<style>
.css-class-to-highlight{
background-color: #ff0;
}
</style>
【讨论】：
new Date(1) == new Date(1) is false
我解决了这个问题
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];
}
});
});
【讨论】：
for (i = 0; i < disabledDays.length; i++) {，因为你已经在做$.inArray。
发现投票最多的答案无效。稍微更新了代码以使其正常工作。 $.inArray() 主要搜索 indexOf()。我们也不能直接比较两个日期是否相等。 参考：Compare two dates with 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;
}
并将接受的函数更新为
if(inArrayDates(date, markDates) != -1) {
return [true, 'selected-highlight', 'tooltip here'];
} else {
return [true, '', ''];
}
【讨论】：
JS 中的日期是对象Date 的实例，因此使用== 或=== 无法正确检查日期是否相等。
简单的解决方案：
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, '', ''];
}
})
【讨论】：
我有一个简单的解决方案，只有我们必须提供将被禁用的日期并显示可用日期的颜色。它对我有用
<style>
.availabledate a {
background-color: #07ea69 !important;
background-image :none !important;
color: #ffffff !important;
}
</style>
对于脚本使用这个：
<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>
希望它可以帮助某人。
【讨论】：
http://jqueryui.com/demos/datepicker/#event-beforeShowDay
将 beforeShowDay 中的日期参数与数组中的日期进行比较，如果匹配，则返回上面链接中定义的数组。
在从 beforeShowDay 返回的数组中，第二个元素用于设置将在日期使用的类名，然后您可以使用 css 为该类设置样式。
【讨论】：
对我有用的是使用内置的 jqueryui 函数formatDate(); 当涉及到 css 时，我不得不稍微调整它并添加额外的类以突出显示日期。
style.css
#datepicker .event-highlight .ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight
{
background-color: darkgreen !important;
color : white !important;
border: 1px solid darkgreen !important;
border-color: darkgreen !important;
}
jquery formatDate()
//different date formats accepted
"mm/dd/yy"
"yy-mm-dd"
"d M, y"
"d MM, y"
"DD, d MM, yy"
"'day' d 'of' MM 'in the year' yy"
//return today's date
$.datepicker.formatDate("yy-mm-dd", $('#datepicker').datepicker("getDate"));
//alternatively you can use this syntax
jQuery.datepicker.formatDate('yy-mm-dd', 'getDate');
在日期选择器中突出显示日期
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
beforeShowDay : function (date){
json.events.forEach(function (jsondate,counter) {
//get jquery date
var jquerydate = $.datepicker.formatDate("yy-mm-dd", date);
//OR alternative syntax
var jquerydate = jQuery.datepicker.formatDate('yy-mm-dd', date);
//get date busy with events
var busyday = jsondate.date;
if (jquerydate === busyday) {
return [true, '.event-highlight', 'tooltip text'];
}else{
return [true, '', ''];
}
});
return [true];
},
【讨论】：