我使用的引导datepicker.I需要突出一些随机的日期。
例如:
我需要强调的日期一样1,3,8,20,21,16,26,30。你能告诉我如何突出在引导日期选择器的随机日期?
正如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库或者如果扩大。
这就是我如何强调除“user_busy_days”阵列天所有天。
引导日期选择器具有beforeShowDay道具,其中获取月份的每一天执行[42倍MAX],所以我只是检查,如果其呈现的一天就是我的数组,如果它出现在阵列我用高亮灰色别的我只是绿色高亮显示。
我希望它会做的伎俩。
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.'};
}
}
});
我找到了解决办法。
$('.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)])
只有一个问题存在的亮点是在点击删除。并把它作为每月少了一个。如果你想八月日期,那么你必须使用7不8。
基于@Hassan拉扎答案是我做这个的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'
};
}
};
博客文章here解释它如何使用引导dateTimePicker的实现。
基本上使用的事件表明,更新和更改日期需要强调。
$('#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://sourcecodezoneseven.blogspot.com/2019/04/here-is-code-function-hilight-var.html