twitter-bootstrap 将课程添加到引导日期选择器中的多个/特定日期?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23604026/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:41:57  来源:igfitidea点击:

Add class to a multiple/specific day in bootstrap datepicker?

javascripttwitter-bootstrapdatepicker

提问by Imat

I'm having a hard time in adding a class to a date in bootstrap. Here's the datepicker. enter image description here

我很难在引导程序中为日期添加一个类。这是日期选择器。在此处输入图片说明

enter image description here

在此处输入图片说明

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?

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

回答by haxtbh

Depending on the datepicker you are using you can do something like this:

根据您使用的日期选择器,您可以执行以下操作:

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

大多数日期选择器都有一个beforeShowDay选项。您可以在此处设置课程以添加到您想要更改的日期。

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

对于这个例子,我使用http://eternicode.github.io/bootstrap-datepicker

An example of how to do this can be found here: jsFiddle

可以在此处找到如何执行此操作的示例: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"];

var active_dates = ["23/5/2014","21/5/2014"];

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

然后使用该beforeShowDay选项根据显示的当天检查日期,然后应用课程。

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

<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 activeClasscan 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可以是任何形式的CSS。在我的示例中,我刚刚更改了背景颜色。在您的示例中,您可以偏移图像并将其应用于当天。

.activeClass{
    background: #F00; 
  }