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

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

$('#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, '', ''];
    }
});

Answer 2

问题出在第三个返回元素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">

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

2 个答案: