Как в 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>
|
необходимо в flatpickr сделать активными только пятницы и субботы
использую версию flatpicr.js 4.5.2 в стороннем компоненте
необобходимо сделать активными только пятницы и субботы на сайте https://flatpickr.js.org/examples/ в примерах есть такой код но не понятно, куда его прописать, или где вызвать? Disabling dates by a function:# The function takes in a Date object, and should return a boolean value. If the function returns true, the date will be disabled. This flexibility allows us to use any arbitrary logic to disable dates. The example below disables Saturdays and Sundays.
{
"disable": [
function(date) {
// return true to disable
return (date.getDay() === 5 || date.getDay() === 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
}
|
flatpickr активные дни
aleksmag,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.js"></script>
<input class="flatpickr" type="text" placeholder="Select Date..">
<script>
flatpickr(".flatpickr",{
"disable": [
function(date) {
// return true to disable
return (date.getDay() != 5 && date.getDay() != 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
});
</script>
</body>
</html>
|
попробовал перенести данный код в секцию <head>
не заработало обязательно ли этот код подлючать после input который вызывает этот календарь? |
aleksmag,
document.addEventListener("DOMContentLoaded", function(){
flatpickr(".flatpickr",{
"disable": [
function(date) {
// return true to disable
return (date.getDay() != 5 && date.getDay() != 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
});
});
вот так попробуйте |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.js"></script>
<script>
window.onload = function () {
flatpickr(".flatpickr", {
"disable": [
function (date) {
// return true to disable
return (date.getDay() != 5 && date.getDay() != 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
});
};
</script>
</head>
<body>
<input class="flatpickr" type="text" placeholder="Select Date..">
</body>
</html>
window.onload = function () { или вариант j0hnik |
странно
когда я просматривают код на сайте я вижу выше код примерно такой который добавляет сам компонент использующий flatpickr
<script type="text/javascript">
var qlSiteOffset=0;
var ConvertFormsConfig = {
"baseurl" : "https://mmk-tour.ru/",
"debug" : false
};
flatpickr.localize(flatpickr.l10ns.ru);
document.addEventListener("DOMContentLoaded", function(event) {
flatpickr.l10ns.default.firstDayOfWeek = 1;
flatpickr("#form1_datetime_274006968", {"mode":"single","dateFormat":"d.m.Y","defaultDate":"","minDate":"","maxDate":"","enableTime":false,"time_24hr":false,"minuteIncrement":5,"inline":false,"disableMobile":false,"locale":"ru"});
});
flatpickr.localize(flatpickr.l10ns.ru);
document.addEventListener("DOMContentLoaded", function(event) {
flatpickr.l10ns.default.firstDayOfWeek = 1;
flatpickr("#form4_datetime_218294727", {"mode":"single","dateFormat":"d.m.Y","defaultDate":"","minDate":"","maxDate":"","enableTime":false,"time_24hr":false,"minuteIncrement":5,"inline":false,"disableMobile":false,"locale":"ru"});
});
flatpickr.localize(flatpickr.l10ns.ru);
document.addEventListener("DOMContentLoaded", function(event) {
flatpickr.l10ns.default.firstDayOfWeek = 1;
flatpickr("#form1_datetime_1571408684", {"mode":"single","dateFormat":"d.m.Y","defaultDate":"","minDate":"","maxDate":"","enableTime":false,"time_24hr":false,"minuteIncrement":5,"inline":false,"disableMobile":false,"locale":"ru"});
});
flatpickr.localize(flatpickr.l10ns.ru);
document.addEventListener("DOMContentLoaded", function(event) {
flatpickr.l10ns.default.firstDayOfWeek = 1;
flatpickr("#form4_datetime_877139813", {"mode":"single","dateFormat":"d.m.Y","defaultDate":"","minDate":"","maxDate":"","enableTime":false,"time_24hr":false,"minuteIncrement":5,"inline":false,"disableMobile":false,"locale":"ru"});
});
</script>
фактически есть 4 формы flatpickr("#form4_datetime_1652290975", но цифровое значения в этом параметре меняется каждый раз при обновлении страницы т.е. я не могу переопределить код в скрипте ниже начальные значения для этих форм начинаются как #form1_datetime_ #form2_datetime_ #form3_datetime_ #form4_datetime_ как правильно мне поймать этот элемент чтобы прописать код типа? flatpickr("#form4_datetime_1652290975", |
в общем до скрипта я докопался
как понял не работало потому что формат русской локали не соответствовал возращаемому значению функции код для отключения дня недели выглядит так
flatpickr("#id_формы", {
dateFormat: "Y-m-d",
disable: [
function(date) {
// return true to disable
return (date.getDay() != 5 && date.getDay() != 6);
}
]
});
код для отключения по диапозано дат выглядит так
flatpickr("#id_формы", {
dateFormat: "Y-m-d",
disable: [
{
from: "2018-10-08",
to: "2018-10-14"
},
{
from: "2018-10-22",
to: "2018-10-29"
}]
});
|
Если им сделать одинаковый класс, то достаточно одного обработчика
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
flatpickr(".flatpickr", {
"disable": [
function (date) {
// return true to disable
return (date.getDay() != 5 && date.getDay() != 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
});
});
</script>
</head>
<body>
<input class="flatpickr" type="text" placeholder="Select Date..">
<input class="flatpickr" type="text" placeholder="Select Date..">
</body>
</html>
|
Или по какой-то общей части id
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
flatpickr('[id*="_datetime_"]', {
"disable": [
function (date) {
// return true to disable
return (date.getDay() != 5 && date.getDay() != 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
});
});
</script>
</head>
<body>
<input id="form1_datetime_218294727" type="text" placeholder="Select Date..">
<input id="form4_datetime_212222222" type="text" placeholder="Select Date..">
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:42. |