Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Календарь с занятыми датами. (https://javascript.ru/forum/library-toolkit-framework/82977-kalendar-s-zanyatymi-datami.html)

HotReboot 19.08.2021 15:21

Календарь с занятыми датами.
 
Здравствуйте. Не подскажите библиотеку календаря, что бы можно было управлять диапазон дат выбор которых запрещён? Спасибо.

рони 19.08.2021 15:26

HotReboot,
https://jqueryui.com/datepicker/

рони 19.08.2021 15:34

HotReboot,
отключение дат
beforeShowDay
искать по форуму примеры по слову beforeShowDay

HotReboot 19.08.2021 15:58

Цитата:

Сообщение от рони (Сообщение 539505)

Не умеет он такого. Я явно указал "диапазон дат", а ему нужно на каждое число css определять

рони 19.08.2021 16:27

Цитата:

Сообщение от HotReboot
"диапазон дат"

код с форума от 2016 года(изменён), что не так?
кликнуть по кнопке
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }

        .highlight_days .ui-state-default {
            background: rgba(102, 255, 102, 1)
        }

        .highlight_days:hover .ui-state-default {
            background: rgba(255, 255, 0, 1)
        }

        .test .ui-state-default {
            background: rgba(255, 215, 0, 1)
        }
    </style>
    <script>
        $(function() {
            var events = [
                ["2021-08-01", "2021-08-04"],
                ["2021-08-25", "2021-09-28"]
            ];

            function bigDay(date, arr) {
                return arr.some(function(el) {
                    el = el.map(d => (d = new Date(d), d.setHours(0, 0, 0, 0), d));
                    return +date >= +el[0] && +date <= el[1]
                })
            }

            $.datepicker.setDefaults($.datepicker.regional['ru']);
            $('#datepicker').datepicker({
                dateFormat: "yy.mm.dd",
                beforeShowDay: function(date) {
                    return bigDay(date, events) ? [true, 'highlight_days', null] : [true, '', null];
                }
            })

            function newData(arr)
            {  events = arr; //events.push(arr)
               $('#datepicker').datepicker( "refresh" );
            }

            $('button').click(_ => newData([["2021-08-05", "2021-08-15"]]))

        });
    </script>
</head>

<body>
    <div id="datepicker"></div>
    <button>"2021-08-05", "2021-08-15"</button>
</body>

</html>

HotReboot 19.08.2021 16:38

рони, Да, это я не нашёл, что сложный объект. Везде через запятую даты. Спасибо. Кстати сразу не подскажите как эти даты менять? Ну у меня select по которому срабатывает ajax и он возвращает даты.

рони 19.08.2021 20:38

Цитата:

Сообщение от HotReboot
как эти даты менять?

добавил, смотрите #5

рони 19.08.2021 20:43

HotReboot,
запред выбора false
return bigDay(date, events) ? [true, 'highlight_days', null] : [true, '', null];

HotReboot 20.08.2021 10:14

рони, Спасибо. Последний вопрос. Я вот тут
$('#datepicker').datepicker( "refresh" );

могу поменять какие-то настройки? Например dateFormat: "yy.mm.dd".

рони 20.08.2021 10:41

Цитата:

Сообщение от HotReboot
dateFormat

Setter
https://api.jqueryui.com/datepicker/#option-dateFormat


Часовой пояс GMT +3, время: 13:20.