Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.08.2021, 15:21
Аспирант
Отправить личное сообщение для HotReboot Посмотреть профиль Найти все сообщения от HotReboot
 
Регистрация: 06.11.2017
Сообщений: 42

Календарь с занятыми датами.
Здравствуйте. Не подскажите библиотеку календаря, что бы можно было управлять диапазон дат выбор которых запрещён? Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 19.08.2021, 15:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

HotReboot,
https://jqueryui.com/datepicker/
Ответить с цитированием
  #3 (permalink)  
Старый 19.08.2021, 15:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

HotReboot,
отключение дат
beforeShowDay
искать по форуму примеры по слову beforeShowDay
Ответить с цитированием
  #4 (permalink)  
Старый 19.08.2021, 15:58
Аспирант
Отправить личное сообщение для HotReboot Посмотреть профиль Найти все сообщения от HotReboot
 
Регистрация: 06.11.2017
Сообщений: 42

Сообщение от рони Посмотреть сообщение
HotReboot,
https://jqueryui.com/datepicker/
Не умеет он такого. Я явно указал "диапазон дат", а ему нужно на каждое число css определять

Последний раз редактировалось HotReboot, 19.08.2021 в 16:02.
Ответить с цитированием
  #5 (permalink)  
Старый 19.08.2021, 16:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Последний раз редактировалось рони, 19.08.2021 в 20:39.
Ответить с цитированием
  #6 (permalink)  
Старый 19.08.2021, 16:38
Аспирант
Отправить личное сообщение для HotReboot Посмотреть профиль Найти все сообщения от HotReboot
 
Регистрация: 06.11.2017
Сообщений: 42

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

Последний раз редактировалось HotReboot, 19.08.2021 в 18:48.
Ответить с цитированием
  #7 (permalink)  
Старый 19.08.2021, 20:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от HotReboot
как эти даты менять?
добавил, смотрите #5
Ответить с цитированием
  #8 (permalink)  
Старый 19.08.2021, 20:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

HotReboot,
запред выбора false
return bigDay(date, events) ? [true, 'highlight_days', null] : [true, '', null];
Ответить с цитированием
  #9 (permalink)  
Старый 20.08.2021, 10:14
Аспирант
Отправить личное сообщение для HotReboot Посмотреть профиль Найти все сообщения от HotReboot
 
Регистрация: 06.11.2017
Сообщений: 42

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

могу поменять какие-то настройки? Например dateFormat: "yy.mm.dd".
Ответить с цитированием
  #10 (permalink)  
Старый 20.08.2021, 10:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от HotReboot
dateFormat
Setter
https://api.jqueryui.com/datepicker/#option-dateFormat
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вывести календарь с временной зоной МСК jurvrn Общие вопросы Javascript 12 06.04.2021 13:22
Не открывается календарь datapicker в ячейках таблицы kupidon Общие вопросы Javascript 13 24.02.2017 20:08
Календарь с подсветкой дат Blacksmouker Элементы интерфейса 2 05.08.2014 09:32
Freelance. Нужен календарь на Javascript для подстановки в <input /> даты и времени. DiYanka Работа 1 14.06.2014 02:03
jQuery UI календарь в далоговом окне ololosh jQuery 1 14.08.2012 17:23