Раскраска дней недели в бутстрапе

Question

Мне нужно выделить несколько дней недели, но мой код не работает. Я думаю, что проблема в двойном вызове DatePicker, но я не знаю, как поступить иначе.

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

Answer 1

Проблема с третьим элементом возврата date.Это должна быть строка .Тип даты - объект

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

beforeShowDay

Функция, которая принимает дату в качестве параметра и должна возвращать массив с:

• [0]: истина / ложь, указывающая, может ли эта дата быть выбрана
• [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">

Answer 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, '', ''];
    }
});