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

Posted 2023-05-07

【中文标题】在引导日期选择器中将课程添加到多个/特定日期？

【英文标题】：Add class to a multiple/specific day in bootstrap datepicker?

【发布时间】：2014-06-29 12:29:00

【问题描述】：

我很难在引导程序中为日期添加课程。这是日期选择器。

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

【问题讨论】：

您使用的是哪个引导程序分支？可以加插件链接吗？

你必须在顶部创建一个圆圈：3px；左：3px；位置：绝对；在每一天

@Praveen，我将它下载到我们的存储库。我不知道我正在使用什么分支的引导程序。

@EnriqueQuero，是的，我知道。但是我应该如何定位我想要的具体日期呢？

不知道您使用的日期选择器库很难说。如果我们有一个 jsfiddle 来检查它会更好

【参考方案1】：

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

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

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

可以在此处找到如何执行此操作的示例：jsFiddle

您需要将要突出显示/标记的日期放入数组中：

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

然后使用beforeShowDay 选项检查日期与当前显示的日期，然后应用课程。

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

);`

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

.activeClass
    background: #F00; 
  

【讨论】：

谢谢！这很有帮助。

是否可以在日期范围内执行此操作？ IE。将20-04-2015 突出显示到24-04-2015，因此总共需要 5 天。

当我使用您的代码时，它工作正常，但今天的日期不活跃

抱歉之前的评论，当我使用您的代码时，它工作正常，但我只想获得选择的事件日期

小提琴似乎不起作用，因为这个答案很旧，并且指定的日期是 2014 年 5 月 23 日，所以你必须在日历中遍历历史

【参考方案2】：

演出前检查：

 $('#calendar').datepicker( 
        calendarWeeks: true, 
        multidate: true,
        todayHighlight: true,
        daysOfWeekDisabled: [0],
        beforeShowDay: function(date)
        if (date.getMonth() == (new Date()).getMonth())
           switch (date.getDate())
           case 4:
              return 
                 tooltip: 'Example tooltip',
                 classes: 'bd'
              ;
           case 8:
              return false;
           case 21:
              return "green";
           
        
     );