Javascript-форум - Календарь с занятыми датами.

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,
отключение дат
beforeShowDay
искать по форуму примеры по слову beforeShowDay

Цитата:

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

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

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

Цитата:

Сообщение от 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>

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

Цитата:

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

как эти даты менять?

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

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

рони, Спасибо. Последний вопрос. Я вот тут

$('#datepicker').datepicker( "refresh" );

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

Цитата:

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

dateFormat

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

рони, Не. Если у меня уже был определён, а перед refresh поменять на другой.

HotReboot,
по ссылке есть все варианты, во время установки(Initialize), текущее состояние(Getter) и установка нового значения(Setter)!!!Get or set the dateFormat option, after initialization:

datepicker выделение диапазона смена формата руссификация

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

<!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>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/datepicker-ru.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];
                },
                onSelect: a => alert(a)
            })

            function newData(arr)
            {  events = arr; //events.push(arr)
               $('#datepicker').datepicker( "option", "dateFormat", "dd MM yy" );
               $('#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>

Rise, А как вы там запретите выбор нескольких дат? Например с 2021-08-25 по 2021-08-28, с 2021-09-10 по 2021-09-15.