且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-01-29 17:53:16

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

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; 
  }