javascript - 从 JSON 填充 jQuery UI Datepicker

Question

我有一个简单的日历，它是我用 jQuery UI 日期选择器制作的。我的问题是:我可以使用来自 JSON 的数据填充此日历吗(其中说明了 2017 年和 2018 年的所有非工作日)？

附言return [!(month == 8 && day == 27), 'highlight', highlight]; - 这只是一个例子，我创建它是为了看看如何用红色突出显示日期.根据需要，我需要做完全相同的事情，但是使用 JSON 文件(当然有更多的日期)。

$(function() {
  $('#calendar').datepicker({
    dateFormat: 'yyyy/mm/dd',
    inline: true,
    firstDay: 1,
    showOtherMonths: false,

    beforeShowDay: function nonWorkingDates(date) {
      var highlight = nonWorkingDates[date];

      var month = date.getMonth() + 1;   // +1 because JS months start at 0
      var day = date.getDate();
      var year = date.getFullYear();
      return [!(month == 8 && day == 27), 'highlight', highlight];
    }

  });
});

body {
  font: bold 14px Arial;
}

#wrapper {
  padding: 50px 0 0 325px;
}

#calendar {
  margin: 25px auto;
  width: 370px;
  height:
}

.ui-datepicker-week-end a {
  color: #d1b375 !important;
}

.highlight span.ui-state-default {
  color: red;
}


/* Reset */

.ui-datepicker,
.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
  margin: 0;
  padding: 0;
  border: none;
  border-spacing: 0;
}


/* Calendar Wrapper */

.ui-datepicker {
  display: none;
  width: 284px;
  height: 220px;
  padding: 15px;
  cursor: default;
  border: 1px solid #0061A5;
  text-transform: uppercase;
  font-family: Tahoma;
  font-size: 12px;
  background: #ffffff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .1), inset 0px 1px 1px rgb(0, 0, 0);
  -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .1), inset 0px 1px 1px rgb(0, 0, 0);
  box-shadow: 0px 1px 1px rgba(255, 255, 255, .1), inset 0px 1px 1px rgb(0, 0, 0);
}


/* Calendar Header */

.ui-datepicker-header {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #d6d6d6;
}

.ui-datepicker-title {
  text-align: center;
}


/* Month */

.ui-datepicker-month {
  position: relative;
  padding-right: 15px;
  color: #0063A7;
}

.ui-datepicker-month:before {
  display: block;
  position: absolute;
  top: 5px;
  right: 0;
  width: 5px;
  height: 5px;
  content: '';
  background: #D1B375;
  background: -moz-linear-gradient(top, #D1B375 0%, #D1B375 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #D1B375), color-stop(100%, #D1B375));
  background: -webkit-linear-gradient(top, #D1B375 0%, #D1B375 100%);
  background: -o-linear-gradient(top, #D1B375 0%, #D1B375 100%);
  background: -ms-linear-gradient(top, #D1B375 0%, #D1B375 100%);
  background: linear-gradient(top, #D1B375 0%, #D1B375 100%);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}


/* Year */

.ui-datepicker-year {
  padding-left: 8px;
  color: #0063A7;
}


/* Prev Next Month */

.ui-datepicker-prev,
.ui-datepicker-next {
  position: absolute;
  top: -2px;
  padding: 5px;
  cursor: pointer;
}

.ui-datepicker-prev {
  left: 0;
  padding-left: 0;
}

.ui-datepicker-next {
  right: 0;
  padding-right: 0;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: block;
  width: 5px;
  height: 10px;
  text-indent: -9999px;
  background-image: url(../img/arrows.png);
}

.ui-datepicker-prev span {
  background-position: 0px 0px;
}

.ui-datepicker-next span {
  background-position: -5px 0px;
}

.ui-datepicker-prev-hover span {
  background-position: 0px -10px;
}

.ui-datepicker-next-hover span {
  background-position: -5px -10px;
}


/* Calendar "Days" */

.ui-datepicker-calendar th {
  padding-top: 15px;
  padding-bottom: 10px;
  text-align: center;
  font-weight: bold;
  color: #0063A7;
}

.ui-datepicker-calendar td {
  padding: 0 7px;
  text-align: center;
  line-height: 26px;
}

.ui-datepicker-calendar .ui-state-default {
  display: block;
  width: 26px;
  outline: none;
  font-weight: bolder;
  text-decoration: none;
  color: #0097F5;
  border: 1px solid transparent;
}


/* Day Active State*/

.ui-datepicker-calendar .ui-state-active {
  color: #D1B375;
  border-color: #0063A7;
}


/* Other Months Days*/

.ui-datepicker-other-month .ui-state-default {
  color: #8a8a8a;
}

<!DOCTYPE html>
<html lang="en">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<head>
  <meta charset="utf-8">
  <title>Calendar</title>
</head>

<body>
  <form id="calendarForm" action="" method="get">

    <div id="calendar"></div>
  </form>
</body>

</html>

Answer 1

加载 JSON 并使用 $.inArray() 或 .indexOf() 函数检查数组中是否存在日期。

JSON 代码 (dates.json):

[
  "2018-08-23T00:00:00.000Z",
  "2018-08-09T00:00:00.000Z",
  "2018-08-06T00:00:00.000Z"
]

Javascript 代码:

$(document).ready(function() {
  $.get("dates.json").then(function(data) {
    dates = [];
    data.forEach(function(i,v){
      dates.push((new Date(i)).setHours(0,0,0,0).valueOf());
    })
    $('#calendar').datepicker({
      dateFormat: 'yyyy/mm/dd',
      inline: true,
      firstDay: 1,
      showOtherMonths: false,

      beforeShowDay: function nonWorkingDates(date) {
        var highlight = nonWorkingDates[date];
        return [$.inArray(date.valueOf(),dates) + 1, 'highlight', highlight];
      }
    });
});

});