将课程添加到引导日期选择器中的多个/特定日期? [英] Add class to a multiple/specific day in bootstrap datepicker?
问题描述
我很难在引导程序中为日期添加一个类.这是日期选择器.
I'm having a hard time in adding a class to a date in bootstrap. Here's the datepicker.
我想要实现的是在我指定的日期放置一个小蓝点.我正在考虑为日期添加一个类.我该怎么做?
What I'm trying to achieved is put a small blue dot in the date I specified. I'm thinking of adding a class to the date. How should I do this?
推荐答案
根据您使用的日期选择器,您可以执行以下操作:
Depending on the datepicker you are using you can do something like this:
大多数日期选择器都有一个 beforeShowDay
选项.您可以在此处设置课程以添加到您要更改的日期.
Most of the date pickers have a beforeShowDay
option. You can set a class here to add to the day you want to change.
对于这个例子,我使用 http://eternicode.github.io/bootstrap-datepicker
For this example im using http://eternicode.github.io/bootstrap-datepicker
可以在此处找到如何执行此操作的示例:jsFiddle
An example of how to do this can be found here: jsFiddle
您需要将要突出显示/标记的日期放入数组中:
You will want to put the dates you want to highlight / mark into an array:
var active_dates = ["23/5/2014","21/5/2014"];
然后使用 beforeShowDay
选项根据当前显示的日期检查日期,然后应用类.
Then use the beforeShowDay
option to check the dates against the current day being shown and then apply a class.
$("#datepicker").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, active_dates) != -1){
return {
classes: 'activeClass'
};
}
return;
}
});`
activeClass
可以是任何形式的 CSS.在我的示例中,我刚刚更改了背景颜色.在您的示例中,您可以偏移图像并将其应用于当天.
The activeClass
can be any form of CSS. In my example i have just changed the background color. In your example you could offset an image and apply it to the day.
.activeClass{
background: #F00;
}
这篇关于将课程添加到引导日期选择器中的多个/特定日期?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!