如何在引导日期选择器中突出显示特定日期?
Posted
技术标签:
【中文标题】如何在引导日期选择器中突出显示特定日期?【英文标题】:How to highlight specific dates in bootstrap datepicker? 【发布时间】:2015-05-01 04:54:56 【问题描述】:我正在使用引导日期选择器。我需要突出显示一些随机日期。
例如:
我需要突出显示日期,例如 1、3、8、20、21、16、26、30。你能告诉我如何在引导日期选择器中突出显示那些随机日期吗?
【问题讨论】:
Highlight certain dates on bootstrap-datepicker 的可能重复项 @amphetamachine 该问题只回答如何突出显示单个日期或一系列日期,而不是如何突出显示多个特定日期。 有人找到解决办法吗? 【参考方案1】:正如 amphetamachine Highlight certain dates on 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';
);
上面将突出显示样式类应用于每个月中列出的日期,通过进一步检查,您可以将其限制为特定月份。一些老的浏览器可能不支持 indexOf,这种情况你可以使用 JS 库或者扩展 if。
【讨论】:
【参考方案2】:这就是我突出显示除“user_busy_days”数组中的日子之外的所有日子的方式。
Bootstrap 日期选择器具有 beforeShowDay 属性,该属性在每月的每一天执行 [最大 42 次],所以我只检查正在呈现的日期是否在我的数组中,如果它存在于数组中,我会突出显示它是灰色的,否则我只是用绿色突出显示它。
我希望它能解决问题。
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.';
);
【讨论】:
请添加几句话来解释这是如何工作的,它将使回顾此问题的用户受益。 谢谢,这很有用。我觉得calender_date
的定义前应该加一个var
。
另外,我觉得月份也需要('0' + date.getUTCMonth()).slice(-2)
或者可以使用calender_date = date.toISOString().split('T')[0];
【参考方案3】:
我找到了解决方案。
$('.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)])
只有一个问题,高亮在点击时会被删除。并且需要一个月的时间。如果你想要 8 月的日期,那么你必须使用 7 而不是 8。
【讨论】:
没有解决月份和日期问题的方法吗?我有同样的问题。我可以在日期和月份中添加 +1 吗?【参考方案4】:基于@Hassan Raza 的回答,我制作了这个 jsfiddle:https://jsfiddle.net/ToniBCN/mzke8tuv/
将日历设置为 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'
;
;
【讨论】:
【参考方案5】:博文here 解释了如何使用 Bootstrap Datetimepicker 来实现。
基本上使用事件show、update和change需要突出显示日期。
$('#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";
有关更多信息,请参阅博客
参考:
https://scode7.blogspot.com/2019/04/here-is-code-function-hilight-var.html
【讨论】:
博客参考和下面答案中的小提琴参考对我不起作用:( CodeDezk,我正在尝试实施您的解决方案,但在该代码示例中并不清楚,并且博客引用已损坏。可以扩展一下吗? 编辑了断开的链接。以上是关于如何在引导日期选择器中突出显示特定日期?的主要内容,如果未能解决你的问题,请参考以下文章