Документация для разработчиков
Документация для разработчиков Документация по D7 Документация по REST Пользовательская документация
Темная тема

BX.calendar

Object
BX.calendar(
 Object params
);

Показать календарь с указанными параметрами.

Параметры функции

Параметр Описание
node Ссылка на узел DOM, около которого нужно показать календарь.
value Начальное значение календаря в формате сайта. Если не указано, то значение берется из поля field.
field Ссылка на узел DOM, соответствующий элементу формы, из которого будет браться и в который будет записываться значение.
form Форма, в которой будет искаться поле field, если указана строка.
callback Обработчик выбора даты. может вернуть false, чтобы запретить закрытие календаря.
callback_after Дополнительный обработчик, вызываемый после выбора даты.
bTime Включать ли контрол выбора времени.
bHideTime Скрывать ли включенный контрол выбора времени по умолчанию. Если указано начальное значение календаря, то факт наличия или отсутствия в нем времени перекроет этот параметр.
currentTime Текущее время (значение по умолчанию).
weekStart Первый день недели. По умолчанию будет взят из настроек сайта/языка.

Пример

<input type="text" value="03.02.2015" name="date" onclick="BX.calendar({node: this, field: this, bTime: false});">


Пользовательские комментарии

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

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
0
WTF WithBitrix 15.04.2022 10:25:29
Сообщение не промодерировано, возможны ошибки и неточности.
:!:  Колбек вызывается никак после выбора даты, а сразу после открытия окна выбора даты.

callback_afterДополнительный обработчик, вызываемый после выбора даты.
Изменение даты повторно не вызывают( что и не надо). Но после того как выбираешь дату и скрывается окно - гд этот долбанный колбэк?

callback_after
Код
BX.calendar({node: this, field: this, bTime: true, bSetFocus: false,callback_after: dateCallback()});
function dateCallback() {
        console.log('callback');
    }
0
Анатолий Зайчёнок 11.04.2022 15:29:46
Сообщение не промодерировано, возможны ошибки и неточности.
Блокировка выбора даты из предыдущего комментария в данный момент не работает.
Работает следующий код:
Код
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 = 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"); //меняем класс у элемента отображающего день, который меньше по дате чем текущий день
        }
    }
}

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


Подключить стиль и вызов аналогичен, как в статье по ссылке из предыдущего комментария.
0
Екатерина Сергеева 15.02.2022 12:52:21
Сообщение не промодерировано, возможны ошибки и неточности.
Блокировка выбора даты в прошлом. Взято тут.

Внимание, не забудьте удалить пробелы, которые вставляются автоматом в это сообщение.
Код
<sc ript>
    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"); //меняем класс у элемента отображающего день, который меньше по дате чем текущий день
            }
        }
    }


    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;
            $('[oncl ick="' + func +'"]').attr({'onclick': func + '; changeCalendar();',}); //повесим событие на выбор месяца
        }
    }


    function changeYear() {
        var el = $('[id ^= "calendar_popup_year_"]'); //найдем div  с календарем
        var link = el.find(".bx-calendar-year-input");
        var func2 = link[0].attributes['onkeyup'].value;
        $('[onke yup="' + 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;
            $('[oncl ick="' + func +'"]').attr({'onclick': func + '; changeCalendar();',}); //повесим событие на выбор года
        }
    }
</sc ript>
<st yle>
    .bx-calendar-range .disabled{
        pointer-events: none;
    }
</style>
0
Вячеслав Докукин 21.01.2022 17:21:00
Сообщение не промодерировано, возможны ошибки и неточности.
Вот полноценный пример

<? \Bitrix\Main\UI\Extension::load('calendar'); ?>

<input type="text" value="03.02.2015" name="date" oncl ick="BX.calendar({node: this, field: this, bTime: false, callback:date_changed});">

<sc ript type="text/javascript">

<script>
function date_changed( selected_date )
{

//current date
var curday = new Date();
var dd = String(curday.getDate()).padStart(2, '0');
var mm = String(curday.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = curday.getFullYear();
curday = dd + '/' + mm + '/' + yyyy;

//selected date
var today = new Date(selected_date);
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = dd + '/' + mm + '/' + yyyy;

if(curday==today)
{
console.log(curday, today);
}

}
</script>
5
Павел Махонин 09.08.2017 14:25:38
Перед использованием - убедитесь, что у вас подключен "date" из CJSCore. В противном случае будут ошибки.
Код
CJSCore::Init(array("jquery","date"));
© «Битрикс», 2001-2022, «1С-Битрикс», 2022
Наверх