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});">

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

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

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

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

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

Евгений Тычкин 13.09.2024 11:00:08

Сообщение не промодерировано, возможны ошибки и неточности.

Если Вам надо через callback получить не только дату но и передать какие то дополнительные параметры, то сделать это можно так.

Код

// html 
<button 
    class="ui-btn ui-btn-xs ui-btn-round" 
    oncl ick="BX.calendar({node: this, field: this, bTime: false, callback_after: BX.ModuleTest.dateCallback({par1:1, par2:2})});" 
>Кнопка</button> 

// js 
BX.ModuleTest.dateCallback = function(params) {
    return function(value) {
        console.log('Дата:', value); 
        console.log('Параметры:', params); 
    }; 
};

Виталий Семко 09.09.2022 08:32:29

Цитата

пишет:
Колбек вызывается никак после выбора даты, а сразу после открытия окна выбора даты.

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

callback_after
[CODE] BX.calendar({node: this , field: this , bTime: true , bSetFocus: false ,callback_after: dateCallback()});
function dateCallback () {
console.log( 'callback' );
}

[/CODE]

Вы неверно указали параметр callback_after, должно быть так.

Код
BX.calendar({node: this , field: this , bTime: true , bSetFocus: false, callback_after: dateCallback}); let dateCallback = function(oDate) { console.log(oDate); }

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'); }

Анатолий Зайчёнок 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 });
    });          
}

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

Екатерина Сергеева 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>

Вячеслав Докукин 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">

<sc ript>
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);
   }

}
</sc ript>

Павел Махонин 09.08.2017 14:25:38

Перед использованием - убедитесь, что у вас подключен "date" из CJSCore. В противном случае будут ошибки.

Код
CJSCore::Init(array("jquery","date"));

Наверх