Разработка и сопровождение интернет-проектов

УСЛУГИ
Создание разработка сайта
Сопровождение и администрирование
Маркетинг и продвижение сайта
Назад
Назад
Создание разработка сайта
Разработка сайтов
Восстановление сайтов
Назад
Маркетинг и продвижение сайта
Продвижение сайтов
Контекстная реклама
Назад
+7 (846) 215-04-47 +7 (917) 112-82-82

Заказать звонок

Модификация календаря Битрикс

Как сделать недоступными к выбору даты меньше текущей в стандартном календаре битрикса?

Стандартный встроенный календарь 1C Битрикс (BX.Calendar) не предоставляет возможности ограничения выбора даты.

Предположим, нам надо ограничить выбор даты таким образом, чтобы невозможно было выбрать дату, меньше текущей. То есть, чтобы мы могли выбрать сегодняшнюю дату и все последующие, но не могли выбрать все предыдущие дни (вчера, позавчера и т.д.)

Так как код вывода календаря формируется в скриптах ядра bitrix, мы не можем его менять буквально.

Пишем функцию изменения блока показа календаря, после того как он сформирован ядром Битрикс.

function changeCalendar() – устанавливает элементам, отображающим дни в окне показа календаря класс disabled, если они соответствуют дате меньшей чем текущая.


function changeCalendar() {
    var el = $('[id ^= "calendar_popup_"]'); //найдем div  с календарем
    var links = el.find(".bx-calendar-cell"); //найдем элементы отображающие дни
    $('.bx-calendar-left-arrow').attr({'onclick': 'changeCalendar();',}); //вешаем функцию изменения  календаря на кнопку смещения календаря на месяц назад
    $('.bx-calendar-right-arrow').attr({'onclick': 'changeCalendar();',}); //вешаем функцию изменения  календаря на кнопку смещения календаря на месяц вперед
    $('.bx-calendar-top-month').attr({'onclick': 'changeMonth();',}); //вешаем функцию изменения  календаря на кнопку выбора месяца
    $('.bx-calendar-top-year').attr({'onclick': 'changeYear();',}); //вешаем функцию изменения  календаря на кнопку выбора года
    var date = new Date();
    for (var i =0; i < links.length; i++)
    {
        var atrDate = links[i].attributes['data-date'].value;
        var d = date.valueOf();
        var g = links[i].innerHTML;
        if (date - atrDate > 24*60*60*1000) {
            $('[data-date="' + atrDate +'"]').addClass("bx-calendar-date-hidden disabled"); //меняем класс у элемента отображающего день, который меньше по дате чем текущий день
        }
    }
}

Для того, чтобы доступность выбора дат изменялась при смене месяца или года пишем две дополнительные функции, которые вешают вызов функции changeCalendar() на событие клика на месяц и год

Функция changeMonth() – функция устанавливает запуск функции изменения календаря по клику на месяц при выборе месяца.


function changeMonth() {
    var el = $('[id ^= "calendar_popup_month_"]'); //найдем div  с календарем
    var links = el.find(".bx-calendar-month");
    for (var i =0; i < links.length; i++) {
        var func = links[i].attributes['onclick'].value;
        $('[onclick="' + func +'"]').attr({'onclick': func + '; changeCalendar();',}); //повесим событие на выбор месяца
    }
}

Функция changeYear() - функция устанавливает запуск функции изменения календаря по клику на год при выборе года.


function changeYear() {
    var el = $('[id ^= "calendar_popup_year_"]'); //найдем div  с календарем
    var link = el.find(".bx-calendar-year-input");
    var func2 = link[0].attributes['onkeyup'].value;
    $('[onkeyup="' + func2 +'"]').attr({'onkeyup': func2 + '; changeCalendar();',}); //повесим событие на ввод года
    var links = el.find(".bx-calendar-year-number");
    for (var i =0; i < links.length; i++) {
        var func = links[i].attributes['onclick'].value;
        $('[onclick="' + func +'"]').attr({'onclick': func + '; changeCalendar();',}); //повесим событие на выбор года
    }
}

В файле стилей добавляем класс .bx-calendar-range .disabled и устанавливаем для него запрет на нажатие по элементам данного класса:


.bx-calendar-range .disabled{
  pointer-events: none;
}

Теперь подключаем написанную нами функцию в том же событии, что и вызов календаря.

Перечисляем функции в событии через «;» в следующем порядке: 1. Вызов календаря. 2. Функция изменения календаря changeCalendar();

Например:


input onclick="BX.calendar({node: this, value: new Date(), field: this, bTime: false}); changeCalendar();" 

Теперь все даты, меньше текущей недоступны к выводу:

Дополнение от 12.04.2022:
Описанный метод может не работать в актуальной версии Битрикс. Далее предлагаем альтернативное решение которое прислал нам читатель блога.


function changeCalendarBlock(){
        var el = $('[id ^= "calendar_popup_"]'); // найдем div с календарем
        var links = el.find(".bx-calendar-cell"); // найдем элементы отображающие дни
        var date = new Date();
        for (var i = 0; i < links.length; i++)
        {
            var atrDate = link[i].attributes['data-date'].value;
            var d = date.valueOf();
            var g = links[i].innerHTML;
            if(date - atrDate > 24*60*60*1000){
                // меняем класс у элемента отображающего день, который меньше по дате чем текущий день
                $('[data-date="'+atrDate+'"]').addClass("bx-calendar-date-hidden disables");
            }
        }
    }

    function changeCalendar(){
        changeCalendarBlock();
        // следит за изменением календаря
        var BXcalendars = BX.findChildrenByClassName(document,'bx-calendar-cell-block', true);
        // создаем экземпляр наблюдателя с указанной функцией колбэка
        const callback = function (mutationList, observer){
            changeCalendarBlock();
        };
        const observer = new MutationObserver(callback);
        BXcalendars.forEach(function(item,i,arr) {
            observer.observe(item, {attributes: true, childList: true, subtree:false});
            }
        );
    }
Лечение и защита сайтов Битрикс от заражения июнь 2022

29.06.2022

Лечение и защита сайтов Битрикс от заражения июнь 2022


Рассмотрим два сценария если уже заразили и как предотвратить заражение

Как построить сайт всего лишь за 7 шагов? (+ лучшие сервисы для создания сайта, чтобы сэкономить вам время)

12.10.2021

Как построить сайт всего лишь за 7 шагов? (+ лучшие сервисы для создания сайта, чтобы сэкономить вам время)


На сегодняшний день создание веб-сайта - это не самое замысловатое задание, с которым только можно столкнуться. Вам не обязательно все возможные детали о веб-хостинге или процессе написания кода, чтобы получить привлекательный и профессиональный ресурс.

Как проверить домен через whois?

18.08.2021

Как проверить домен через whois?


Проверка домена на занятость. Whois - как использовать и что можно проверить? Что такое история домена и где её смотреть? Ответы на эти другие вопросы в нашей статье.