Calendar

Виджет-календарь предоставляет возможность выбора даты или интервала дат.

Инициализация

Для инициализации виджета запустите функцию конструктор calendar.
                            
 rc.calendar({
    pageX: e.pageX,
    pageY: e.pageY,
    onlyDate: true,
    type: 1,
    fromLabel: '',
    from: null,
    to: null,
});
                            
                        

Выбор интервала

Установив конфигурационный параметр type вы можете изменить поведение календаря соответствующим образом:
Значение Описание
1 Выбор одной даты (значение по умолчанию)
2 Выбор интервала дат
                            
 rc.calendar({
    pageX: e.pageX,
    pageY: e.pageY,
    onlyDate: true,
    type: 2,
    fromLabel: '',
    from: null,
    to: null,
});
                            
                        

Предустановка значений даты

Передав соответствующие параметры вы можете предустановить даты на момент открытия каледаря:
Значение Описание
fromLabel Устанавливает значение ярлыка для первой интервальной даты если значение не выбрано ("не задано" по умолчанию)
from Устанавливает значение первой интервальной даты (формат: YYYY-M-D)
toLabel Устанавливает значение ярлыка для второй интервальной даты если значение не выбрано ("не задано" по умолчанию)
to Устанавливает значение второй интервальной даты (формат: YYYY-M-D)
                            
 rc.calendar({
    pageX: e.pageX,
    pageY: e.pageY,
    onlyDate: true,
    type: 2,
    fromLabel: 'ничего',
    toLabel: 'ничего 2',
    from: '2019-05-01',
    to: '2019-06-01'
});
                            
                        

Настройка выбора дат и времени

Виджет позволяет настроить ограничения выбора дат и времени. Свойство regulations конфигурирующего объекта содержит объект со следующими свойствами:
Значение Описание
BaseDays Задает коллекцию объектов ограничивающих дни недели
SpecialDays Позволяет задать ограничение на определенные дни не зависимо от дня недели
Объект-параметр для дня недели поддерживает следующий интерфейс.
                    
{
    DayId:5,
    IsWorking: true,
    StartWorkingTime: {
        Hour: 10,
        Minutes: 0
    },
    EndWorkingTime: {
        Hour: 17,
        Minutes: 0
    }
}
                    
                
В то время как ограничения SpecialDays позволяет только задать день как не рабочий IsWorking.
                            
const baseDays = [
    {
        DayId: 0,
        IsWorking:  false,
    },
    {
        DayId: 1,
        IsWorking: true,
        StartWorkingTime: {
            Hour: 9,
            Minutes: 0
        },
        EndWorkingTime: {
            Hour: 18,
            Minutes: 0
        }
    },
    {
        DayId:2,
        IsWorking: true,
        StartWorkingTime: {
            Hour: 9,
            Minutes: 0
        },
        EndWorkingTime: {
            Hour: 18,
            Minutes: 0
        }
    },
    {
        DayId:3,
        IsWorking: true,
        StartWorkingTime: {
            Hour: 9,
            Minutes: 0
        },
        EndWorkingTime: {
            Hour: 18,
            Minutes: 0
        }
    },
    {
        DayId:4,

        IsWorking: true,
        StartWorkingTime: {
            Hour: 9,
            Minutes: 0
        },
        EndWorkingTime: {
            Hour: 18,
            Minutes: 0
        }
    },
    {
        DayId:5,
        IsWorking: true,
        StartWorkingTime: {
            Hour: 10,
            Minutes: 0
        },
        EndWorkingTime: {
            Hour: 17,
            Minutes: 0
        }
    },
    {
        DayId:6,
        IsWorking: false
    }
    ];

const regulations = {
    BaseDays: baseDays,
    SpecialDays: [
        {
            Date: '2019-06-12',
            IsWorking: false,
            StartWorkingTime: {
                Hour: 12,
                Minutes: 0
            },
            EndWorkingTime: {
                Hour: 14,
                Minutes: 0
            }
        }
    ]
};

rc.calendar({
    pageX: e.pageX,
    pageY: e.pageY,
    type: 2,
    fromLabel: 'ничего',
    toLabel: 'ничего 2',
    from: '2019-05-01',
    to: '2019-06-01',
    regulations: regulations
});
                            
                        

Возвращаемые данные

При закрытии календаря вызывается пользовательская функция обратного вызова получающая значения выбранных дат.
                            
rc.calendar({
    pageX: e.pageX,
    pageY: e.pageY,
    type: 2,
    fromLabel: 'ничего',
    toLabel: 'ничего 2',
    from: '2019-05-01',
    to: '2019-06-01',
}, (from, to) => {
        $.notify('Первое значение: ' + (from || 'не выбрано') + ', второе значение: ' + (to || 'не выбрано'), {position: "top center", className: 'success'});
    }
);
                            
                        
Made on
Tilda