twitter-bootstrap 如何在引导日期选择器中突出显示特定日期？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28782684/
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
How to highlight specific dates in bootstrap datepicker?
提问by Deepa Mani
I am using bootstrap datepicker.I need to highlight some random dates.
我正在使用引导程序日期选择器。我需要突出显示一些随机日期。
For Example:
例如：
I need to highlight the dates like 1,3,8,20,21,16,26,30. Could you please tell me how to highlight those random dates in bootstrap datepicker?
我需要突出显示 1、3、8、20、21、16、26、30 等日期。你能告诉我如何在引导日期选择器中突出显示那些随机日期吗？
回答by user3702362
As suggested by amphetamachine Highlight certain dates on bootstrap-datepickerprovides most of what is required to solve this. The answer to that question can be adapted to the following
正如 amphetamachine 所建议的那样，在 bootstrap-datepicker 上突出显示某些日期提供了解决此问题所需的大部分内容。该问题的答案可以修改为以下内容
$('.inline_date').datepicker({
multidate: true,
todayHighlight: true,
minDate: 0,
beforeShowDay: function(date) {
var hilightedDays = [1,3,8,20,21,16,26,30];
if (~hilightedDays.indexOf(date.getDate())) {
return {classes: 'highlight', tooltip: 'Title'};
}
}
});
The above will apply the highlight style class to the listed days in every month, with further checks you could limit it to specific months. Some old browsers may not support indexOf, in which case you can either use a JS library or expand the if.
以上将突出显示样式类应用于每个月列出的日期，进一步检查您可以将其限制为特定月份。一些旧浏览器可能不支持 indexOf，在这种情况下，您可以使用 JS 库或扩展 if。
回答by Hassan Raza
this is how i am highlighting all days except the days in "user_busy_days" array.
这就是我突出显示除“user_busy_days”数组中的日子以外的所有日子的方式。
Bootstrap date-picker has beforeShowDay prop, which gets executed for each day of month [42 times max], so i just check if the day which is being rendered is in my array , and if it is present in array i highlight it with a gray color else i just highlight it with green color .
Bootstrap 日期选择器有 beforeShowDay 属性，它在每月的每一天执行 [最多 42 次]，所以我只检查正在呈现的日期是否在我的数组中，如果它存在于数组中，我用灰色，否则我只是用绿色突出显示它。
I hope it will do the trick.
我希望它会成功。
var today = new Date();
var today_formatted = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+('0'+today.getDate()).slice(-2);
var user_busy_days = ['2017-12-09','2017-12-16','2017-12-19'];
$('#datetimepicker12').datepicker({
inline: true,
sideBySide: true,
beforeShowDay: function (date) {
calender_date = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+('0'+date.getDate()).slice(-2);
var search_index = $.inArray(calender_date, user_busy_days);
if (search_index > -1) {
return {classes: 'non-highlighted-cal-dates', tooltip: 'User available on this day.'};
}else{
return {classes: 'highlighted-cal-dates', tooltip: 'User not available on this day.'};
}
}
});
回答by urfusion
I found a solution.
我找到了解决办法。
$('.inline_date').datepicker({
multidate: true,
todayHighlight: true,
minDate: 0,
});
$('.inline_date').datepicker('setDates', [new Date(2015, 7, 5), new Date(2015, 7, 8), new Date(2015, 7, 7)])
Only one problem there the highlights are removed on click. and it take month as one less. if you want August dates then you have to use 7 not 8.
只有一个问题在点击时高亮部分会被删除。它需要一个月少一个。如果你想要八月的日期，那么你必须使用 7 而不是 8。
回答by Toni BCN
Based on @Hassan Raza answer's I've made this jsfiddle: https://jsfiddle.net/ToniBCN/mzke8tuv/
基于@Hassan Raza 的回答，我制作了这个 jsfiddle：https://jsfiddle.net/ToniBCN/mzke8tuv/
Set calendar to february 2019 to see some days in orange, others in green and the rest disabled, depending json data.
将日历设置为 2019 年 2 月，以查看某些日期为橙色，其他日期为绿色，其余日期禁用，具体取决于 json 数据。
// In order to call bootstrap's datepicker instead of jquery object
// https://github.com/uxsolutions/bootstrap-datepicker
var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
$.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functionality
$.fn.bootstrapDP.defaults.format = "dd/mm/yyyy";
$.fn.bootstrapDP.defaults.startDate = '01/01/2019'
$.fn.bootstrapDP.defaults.beforeShowDay = function(date) {
// in order to get current day from calendar in the same format than json
calendar_dates = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2);
let optionByDate = [{
"date": "20190126",
"option": "A"
},
{
"date": "20190128",
"option": "B"
}, {
"date": "20190131",
"option": "A"
}, {
"date": "20190202",
"option": "B"
}, {
"date": "20190205",
"option": "A"
}, {
"date": "20190207",
"option": "B"
}, {
"date": "20190210",
"option": "A"
}, {
"date": "20190212",
"option": "B"
}, {
"date": "20190215",
"option": "A"
}, {
"date": "20190217",
"option": "B"
}, {
"date": "20190220",
"option": "A"
}, {
"date": "20190222",
"option": "B"
}, {
"date": "20190225",
"option": "A"
}, {
"date": "20190227",
"option": "B"
}, {
"date": "20190302",
"option": "A"
}, {
"date": "20190304",
"option": "B"
}
];
// Get data from optionByDate json
function getDataByCalendar(date) {
return optionByDate.filter(
function(optionByDate) {
return optionByDate.date == date
}
);
}
let search_index = getDataByCalendar(calendar_dates);
if (search_index.length > 0) {
if (search_index[0].option == "A") return {
classes: 'highlighted-a',
tooltip: 'A option'
};
if (search_index[0].option == "B") return {
classes: 'highlighted-b',
tooltip: 'B option'
};
} else {
// Disabled day
return {
enabled: false,
tooltip: 'No option'
};
}
};
回答by CodeDezk
The Blog post hereexplaining how it can achieve using Bootstrap Datetimepicker.
此处的博客文章 解释了如何使用 Bootstrap Datetimepicker 实现。
Basically using the events show, updateand changethe date need to be highlighted.
基本上使用事件显示，更新和更改需要突出显示的日期。
$('#datetimepicker').on('dp.show', function(e){
highlight()
})
$('#datetimepicker').on('dp.update', function(e){
highlight()
})
$('#datetimepicker').on('dp.change', function(e){
highlight()
})
function highlight(){
var dateToHilight = ["04/19/2019","04/20/2019","04/30/2019"];
var array = $("#datetimepicker").find(".day").toArray();
for(var i=0;i -1) {
array[i].style.color="#090";
array[i].style.fontWeight = "bold";
}
}
}
For more information see the blog
有关更多信息，请参阅博客
Reference:
参考：
https://scode7.blogspot.com/2019/04/here-is-code-function-hilight-var.html
https://scode7.blogspot.com/2019/04/here-is-code-function-hilight-var.html
