在引导日期选择器中为星期几着色答案

【问题标题】：Coloring days of week in a bootstrap datepicker在引导日期选择器中为星期几着色
【发布时间】：2019-06-17 07:29:57
【问题描述】：

我需要突出显示一周中的某些日子，但我的代码不起作用。我认为问题在于双重日期选择器调用，但我不知道该怎么做。

 <style>
.Highlighted {
   background-color : Green !important;
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
   font-size: 12pt;
}
</style>

  <div class="input-group date" data-provide="datepicker" id="datepicker">
    <input type="text" class="form-control" name="data" id="txtDate">

    <script>
    var date=new Date();
    var today = new Date(date.getFullYear(), date.getMonth(), date.getDate()+1);
    var end=new Date(date.getFullYear(), date.getMonth()+2, date.getDate())
    $(document).ready(function() {
        $('#datepicker').datepicker({
            format: "yyyy-mm-dd",
        daysOfWeekDisabled: "<%=request.getAttribute("giorni")%>",
        startDate : today,
        endDate : end,
        });


        $('#txtDate').datepicker({
          beforeShowDay: function(date) {
          var day = date.getDay();
            if (day == 0|| day == 4) {
                return [true, "Highlighted", date];
            }
                return [true, '', ''];
            }
        });
        });
    </script>

【问题讨论】：

标签： javascript jquery datepicker

【解决方案1】：

问题在于第三个返回元素date。它必须是一个字符串。日期类型为对象

https://api.jqueryui.com/datepicker/#option-beforeShowDay

演出前

一个以日期为参数的函数，必须返回一个数组：

[0]: true/false 表示此日期是否可选
[1]: 添加到日期单元格的 CSS 类名或默认为 "" 演示文稿
[2]：此日期的可选弹出工具提示

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
var end = new Date(date.getFullYear(), date.getMonth() + 2, date.getDate())
$(document).ready(function() {
  $('#datepicker').datepicker({
    format: "yyyy-mm-dd",
    daysOfWeekDisabled: "0,6",
    startDate: today,
    endDate: end,
  });


  $('#txtDate').datepicker({
    beforeShowDay: function(date) {
      var day = date.getDay();
      if (day == 0 || day == 4) {
        return [true, "Highlighted", date.toDateString()]; // date.toDateString() or ''
      }
      return [true, '', ''];
    }
  });
});

.Highlighted {
  background-color: Green !important;
  background-image: none !important;
  color: White !important;
  font-weight: bold !important;
  font-size: 12pt;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css' />

<input type="text" class="form-control" name="data" id="txtDate" autocomplete="off">

【讨论】：

【解决方案2】：

也许尝试结合两个日期选择器功能。

$('#datepicker').datepicker({
    format: "yyyy-mm-dd",
    daysOfWeekDisabled: "<%=request.getAttribute("giorni")%>",
    startDate : today,
    endDate : end,
    beforeShowDay: function(date) {
        var day = date.getDay();

        if (day == 0 || day == 4) {
            return [true, "Highlighted", date];
        }

        return [true, '', ''];
    }
});

【讨论】：