在引导日期戳中将类添加到多个/特定的一天？ [英] Add class to a multiple/specific day in bootstrap datepicker?

问题描述

我很难在一个引导日期中添加一个类。这是datepicker。

我想要实现的是放置在我指定的日期的小蓝点。我正在考虑在日期上添加一个类。我应该怎么做？

解决方案

根据你使用的datepicker，你可以这样做：

大多数日期选择器都有一个 beforeShowDay 选项。您可以在这里设置一个类，以添加到您要更改的日期。

对于此示例，使用 http://eternicode.github.io/bootstrap-datepicker

可以在这里找到一个如何做到这一点的例子： jsFiddle

您将要放置所需的日期突出显示/标记成数组：

var active_dates = [23/5/2014，21/5/2014];

然后使用 beforeShowDay 选项来查看当前显示的日期然后应用一个类。

< input type =textid =datepicker/>

  $（＃datepicker）。datepicker（{
格式：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 { 
类：'activeClass'
}; 
} 
 return; 
} 
  

}）;`

activeClass 可以是任何形式的CSS。在我的例子中，我刚刚改变了背景颜色。在您的示例中，您可以将图像偏移并应用于当天。

  .activeClass {
 background：＃F00 ; 
} 
  

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:

Most of the date pickers have a beforeShowDay option. You can set a class here to add to the day you want to change.

For this example im using http://eternicode.github.io/bootstrap-datepicker

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"];

Then use the beforeShowDay option to check the dates against the current day being shown and then apply a class.

<input type="text" id="datepicker" />

$("#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;
  }

});`

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屋！