如何在bootstrap datepicker中突出显示特定日期？

Question

我正在使用bootstrap datepicker.我需要突出显示一些随机日期.

例如:

我需要强调日期,如1,3,8,20,21,16,26,30.你能告诉我如何在bootstrap datepicker中突出显示那些随机日期吗？

Answer 1

如amphetamachine所建议，突出显示bootstrap-datepicker上的某些日期可以解决此问题。该问题的答案可以适应以下情况

$('.inline_date').datepicker({
    multidate: true,
    todayHighlight: true,
    minDate: 0,
    beforeShowDay: function(date) {
       var hilightedDays = [1,3,8,20,21,16,26,30];
       if (~hilightedDays.indexOf(date.getDate())) {
          return {classes: 'highlight', tooltip: 'Title'};
       }
    }
});

上面的代码将突出显示样式类应用于每个月列出的日期，进一步检查您可以将其限制为特定月份。一些旧的浏览器可能不支持indexOf，在这种情况下，您可以使用JS库或扩展if。

Answer 2

这就是我突出显示除“user_busy_days”数组中的日子之外的所有日子的方式。

Bootstrap 日期选择器有 beforeShowDay 属性，它会在每月的每一天执行 [最多 42 次]，所以我只需检查正在渲染的日期是否在我的数组中，如果它存在于数组中，我用 a 突出显示它灰色，否则我只是用绿色突出显示它。

我希望它能成功。

        var today               = new Date();
        var today_formatted     = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+('0'+today.getDate()).slice(-2);
        var user_busy_days      = ['2017-12-09','2017-12-16','2017-12-19'];



        $('#datetimepicker12').datepicker({
            inline: true,
            sideBySide: true,
            beforeShowDay: function (date) {

                calender_date = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+('0'+date.getDate()).slice(-2);

                var search_index = $.inArray(calender_date, user_busy_days);

                if (search_index > -1) {
                    return {classes: 'non-highlighted-cal-dates', tooltip: 'User available on this day.'};
                }else{
                    return {classes: 'highlighted-cal-dates', tooltip: 'User not available on this day.'};
                }

            }
        });

Answer 3

我找到了解决方案。

     $('.inline_date').datepicker({
        multidate: true,
        todayHighlight: true,
        minDate: 0,
    });

 $('.inline_date').datepicker('setDates', [new Date(2015, 7, 5), new Date(2015, 7, 8), new Date(2015, 7, 7)])

只有一个问题，点击后突出显示就会被删除。还需要一个月的时间。如果你想要八月的日期，那么你必须使用 7 而不是 8。