Форум

dima85 · #1 (**permalink**) 22.10.2019, 10:18

http://t1m0n.name/air-datepicker/doc...custom-content
Ниже рабочий код, он в каждый месяц, в каждую дату: 1, 10, 12, и 22 добавляет '<span class="dp-note"></span>'

Я хочу переделать массив eventDates и сделать такого вида:

Код:

 eventDates = ['2019-10-01', '2019-10-10', '2019-10-12', '2019-10-22'],

Насколько я понимаю 10 строчка должна выглядеть как-то так, но она не работает и не выдает ошибок, подскажите как правильно ее написать:

Код:

if (cellType == 'day' && date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate() == new Date(eventDates)) {

var eventDates = [1, 10, 12, 22],
    $picker = $('#custom-cells'),
    $content = $('#custom-cells-events'),

$picker.datepicker({
    language: 'en',
    onRenderCell: function (date, cellType) {
        var currentDate = date.getDate();
        // Add extra element, if `eventDates` contains `currentDate`
        if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
            return {
                html: currentDate + '<span class="dp-note"></span>'
            }
        }
    }
})

// Select initial date from `eventDates`
var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))

рони · #2 (**permalink**) 22.10.2019, 15:06

dima85,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div.datepicker--cell.datepicker--cell-day.dp-note{
      border: #FF0000 2px solid;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet" type="text/css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>

  <script>
$(function() {
var eventDates = ['2019-10-01', '2019-10-10', '2019-10-12', '2019-10-22'].map(a => (a = new Date(a), a.setHours(0,0,0,0), a.getTime())),
    $picker = $('.date');

$picker.datepicker({
    onRenderCell: function (date, cellType) {
        var currentDate = date.getTime();
        if (cellType == 'day' && eventDates.indexOf(currentDate) != -1) {
            return {
                classes: "dp-note"
            }
        }
    }
})

// Select initial date from `eventDates`
var currentDate = currentDate = new Date();
$picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))

});
  </script>
</head>

<body>

<div class="date"></div>
</body>
</html>

dima85 · #3 (**permalink**) 22.10.2019, 15:31

Спасибо большое. Отблагодарю на телефон как обычно.

Форум

Справочник

Discord чат

Курсы javascript