Событие Flatpickr onDayCreate: изменение цвета определенных дней - PullRequest
Новая
       11

Событие Flatpickr onDayCreate: изменение цвета определенных дней

0 голосов
/ 23 июня 2019

Я борюсь с событием Flatpickr (https://flatpickr.js.org/) onDayCreate. Я хочу изменить цвет определенных дней и попробовать следующие коды: 

<style>
.redClass {
  background-color: red !important;
}
.greenClass {
  background-color: green !important;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/material_orange.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
<script>
        var dates = {
    20191029: 1,
    20191030: 0,
    20191031: 0,
    20191101: 1,
  },
  classDict = {
    0: 'redClass',
    1: 'greenClass',
  };

function get2DigitFmt(val) {
  return ('0' + val).slice(-2);
}
flatpickr("#dayCreate", {
  onDayCreate: function(dObj, dStr, fp, dayElem) {
    var date = dayElem.dateObj,
      // Note the + 1 in the month.
      key = date.getFullYear() + get2DigitFmt(date.getMonth() + 1) + get2DigitFmt(date.getDate()),
      value = classDict[dates[key]];
    if (value) {
      dayElem.className += ' ' + value;
    }
  }
});
</script>

<div class="form-group">
<label for="my_date" class=" form-control-label">Reservation Date</label>
<input type="text" name="tarih" class="form-control dayCreate" id="id_date>
 </div>

но браузер не отображает палитру данных, и в выводе консоли не появляется ошибка

...