Форум

drkrol · #1 (**permalink**) 11.12.2016, 00:57

Здравствуйте. Есть такой календарь flatpickr https://chmln.github.io/flatpickr/ , и у него есть функция onDayCreate() https://chmln.github.io/flatpickr/#event-onDayCreate , которая позволяет добавить к датам свой span. Но у меня так и не получилось указать определённые даты и диапазон дат, к которым должны создаться span'ы. Подскажите, как это сделать?

рони · #2 (**permalink**) 11.12.2016, 02:54

drkrol,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .flatpickr-day.busy {
    background-color:  #FF0000 ;
  }

  </style>

</head>

<body>
<div id="slider"></div>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<input class="flatpickr" type="text" placeholder="Select Date..">
<script>
var data = [(new Date(2016,11,17,0,0,0,0)).getTime(),(new Date(2016,11,21,0,0,0,0)).getTime() ];
flatpickr(".flatpickr", {
    onDayCreate: function(dObj, dStr, fp, dayElem){
       if(data.indexOf(dayElem.dateObj.getTime()) > -1  )
           // dayElem.innerHTML += "<span class='event busy'>test</span>";
              dayElem.classList.add("busy")
    }
});

</script>

</body>
</html>

drkrol · #3 (**permalink**) 11.12.2016, 15:24

рони,
а диапазон дат возможно как-нибудь? Чтобы не указывать все даты, а указать только начало и конец.

рони · #4 (**permalink**) 11.12.2016, 16:10

drkrol,
строка 25 для диапазона ...

var a = data[0], b = data[1];
 if (dayElem.dateObj.getTime() >= a && dayElem.dateObj.getTime() <= b)

drkrol · #5 (**permalink**) 11.12.2016, 17:39

спасибо

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .flatpickr-day.busy {
    background-color:  #FF0000 ;
  }

  </style>

</head>

<body>
<div id="slider"></div>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<input class="flatpickr" type="text" placeholder="Select Date..">
<script>
var data = [(new Date(2016,11,17,0,0,0,0)).getTime(),(new Date(2016,11,21,0,0,0,0)).getTime() ];
flatpickr(".flatpickr", {
    onDayCreate: function(dObj, dStr, fp, dayElem){
var a = data[0], b = data[1];
 if (dayElem.dateObj.getTime() >= a && dayElem.dateObj.getTime() <= b)

           // dayElem.innerHTML += "<span class='event busy'>test</span>";
              dayElem.classList.add("busy")
    }
});

</script>

</body>
</html>

но на локальной машине всё работает)

рони · #6 (**permalink**) 11.12.2016, 18:11

drkrol, добавьте run, для запуска примера

[HTML run][/HTML]

drkrol · #7 (**permalink**) 12.12.2016, 03:17

рони,
Подскажи, а как обработать даты такого вида:
["2016-12-12", "2106-12-16"]
?

рони · #8 (**permalink**) 12.12.2016, 10:07

Сообщение от drkrol

Подскажи,

читайте документацию, там много интересного ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .flatpickr-day.busy {
    background-color:  #FF0000 ;
  }
  </style>

</head>

<body>
<div id="slider"></div>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<input class="flatpickr" type="text" placeholder="Select Date..">
<script>
var data = ["2016-12-12", "2016-12-16"];
flatpickr(".flatpickr", {
    onDayCreate: function(dObj, dStr, fp, dayElem){
    var a = fp.parseDate(data[0]), b = fp.parseDate(data[1]);
    if (dayElem.dateObj.getTime() >= a && dayElem.dateObj.getTime() <= b)
              dayElem.classList.add("busy")
    }
});
</script>

</body>
</html>

drkrol · #9 (**permalink**) 13.12.2016, 02:26

рони,
то, что можете сделать вы, в документации нет...
Последняя просьба с flatpickr. Как в таком формате (["2016-12-12", "2016-12-16"]

вывести отдельно стоящие даты ( не диапазон). То есть первый код, но с датами в привычном виде. Я этот dateParce и туда, и сюда, но ничего не вышло

рони · #10 (**permalink**) 13.12.2016, 08:49

drkrol,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .flatpickr-day.busy {
    background-color:  #FF0000 ;
  }
  </style>

</head>

<body>
<div id="slider"></div>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<input class="flatpickr" type="text" placeholder="Select Date..">
<script>
var data = ["2016-12-12", "2016-12-16", ["2016-12-28", "2016-12-30"]];//
flatpickr(".flatpickr", {
    onDayCreate: function(dObj, dStr, fp, dayElem) {
        var a = dayElem.dateObj.getTime();
        a = data.some(function(b) {
            return typeof b == "string" ? a == fp.parseDate(b).getTime() :
            a >= fp.parseDate(b[0]).getTime() && a <= fp.parseDate(b[1]).getTime()
        });
        if (a) dayElem.classList.add("busy")
    }
});
</script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript