Javascript-форум - Как в flatpickr выделить определённые дни и диапазон дат?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как в flatpickr выделить определённые дни и диапазон дат? (https://javascript.ru/forum/misc/66358-kak-v-flatpickr-vydelit-opredeljonnye-dni-i-diapazon-dat.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
     }
   });
});

вот так попробуйте

Цитата:

обязательно ли этот код подлючать после input который вызывает этот календарь?

Типовая компоновка страницы

<!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>