Как в flatpickr выделить определённые дни и диапазон дат?
Здравствуйте. Есть такой календарь flatpickr https://chmln.github.io/flatpickr/ , и у него есть функция onDayCreate() https://chmln.github.io/flatpickr/#event-onDayCreate , которая позволяет добавить к датам свой span. Но у меня так и не получилось указать определённые даты и диапазон дат, к которым должны создаться span'ы. Подскажите, как это сделать?
|
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,
строка 25 для диапазона ... var a = data[0], b = data[1]; if (dayElem.dateObj.getTime() >= a && dayElem.dateObj.getTime() <= b) |
спасибо
<!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>
но на локальной машине всё работает) |
drkrol, добавьте run, для запуска примера
[HTML run][/HTML] |
рони,
Подскажи, а как обработать даты такого вида: ["2016-12-12", "2106-12-16"] ? |
Цитата:
<!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>
|
рони,
то, что можете сделать вы, в документации нет... Последняя просьба с flatpickr. Как в таком формате (["2016-12-12", "2016-12-16"];) вывести отдельно стоящие даты ( не диапазон). То есть первый код, но с датами в привычном виде. Я этот dateParce и туда, и сюда, но ничего не вышло |
flatpickr выделение дат,данные строка или массив диапазона(начало/конец)
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>
|
| Часовой пояс GMT +3, время: 08:45. |