Question

我需要更新日历，并突出显示某个日期，如果我调用函数Highlight()，它会在最初突出显示，因为当我点击按钮并尝试突出显示时它没有突出显示。可能是什么问题。

＆＃13;

function Highlight() {
  jQuery_cal('.calendar').datepicker('remove');
  var eventDates = {};
  eventDates[new Date('06/04/2018')] = new Date('06/04/2018');
  eventDates[new Date('06/06/2018')] = new Date('06/06/2018');
  eventDates[new Date('06/20/2018')] = new Date('06/20/2018');
  eventDates[new Date('06/25/2018')] = new Date('06/25/2018');
  setUPRecordingCalendar(eventDates);

}

setUPRecordingCalendar({});
//Highlight();


function setUPRecordingCalendar(eventDates) {

  // datepicker
  jQuery_cal('#calendar').datepicker({
    beforeShowDay: function(date) {
      var highlight = eventDates[date];
      if (highlight) {
        return [true, "event", highlight];
      } else {
        return [true, '', ''];
      }
    }
  });
}

＆＃13;

.event a {
  background-color: #42B373 !important;
  background-image: none !important;
  color: #ffffff !important;
}

.ui-datepicker {
  font-size: 12px;
  margin: 0 0 0 20px;
}

＆＃13;

<html>

<body>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

  <link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css'>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>

  <script type="text/javascript">
    var jQuery_cal = $.noConflict(true);
  </script>

  <div id="demo">
    <div style="width:300px;height:225px;" id="calendar"> </div>
  </div>
  <button onclick="Highlight()"> Highlight</button>


</body>

</html>

＆＃13;

这是小提琴链接https://jsfiddle.net/20tszxbz/

Bootstrap日期选择器突出显示日期

0 个答案: