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

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

Стандартный встроенный календарь 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 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();',}); //повесим событие на выбор месяца
    }
}

В файле стилей добавляем класс .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();" 

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

support@capyba.ru