SliderTime

Введение

Плагин для выбора временного диапазона с помощью ползунка. Расширение плагина layui.slider.

Архитектура программного обеспечения

Библиотека JavaScript layui.

Демонстрация

Демонстрация SliderTime:
https://www.itmm.wang/module/demo/sliderTime.html

Инструкция по установке

layui.config({
    base: ...
}).extend({
    sliderTime: "sliderTime/sliderTime"
});

Использование

1. SliderTime основан на layui.slider, поэтому все настройки слайдера сохраняются.
2. Параметр range должен быть установлен в значение true.
3. Добавлен атрибут disabledValue, который запрещает выбор временного диапазона. Например: [[«10:00», «10:30»], [«14:00», «15:30»]]
4. Добавлен атрибут disabledText, который определяет текст подсказки при выборе запрещённого временного диапазона. Если атрибут не задан, подсказка не отображается. Пример: {start} — {end} уже занято. Поддерживаются заполнители start и end.
5. Добавлен метод getValue, возвращающий текущий выбранный временной диапазон (в формате времени).
6. Добавлен метод isOccupation, возвращающий информацию о том, содержит ли выбранный временной диапазон запрещённый временной диапазон.
7. Добавлен общий метод numToTime для преобразования десятичного числа в формат времени. Пример: 480 → 08:00.
8. Добавлен общий метод timeToNum для преобразования формата времени в десятичное число. Пример: 24:00 → 1440.

Пример


Пример кода

layui.use(['sliderTime'], function () {
    var sliderTime = layui.sliderTime;

    var slider = sliderTime.render({
          elem: '#id'  //Привязка элемента
        , min: "08:00"
        , max: "18:00"
        , step: 10
        , disabledValue: [["10:00", "10:30"], ["14:00", "15:30"]] // Отображение запрещённых временных диапазонов
        , disabledText: '{start} ~ {end} уже занято'
        , setTips: function (value) {
            //Пользовательский текст подсказки
            return sliderTime.numToTime(value);
        }, change: function (value) {
            console.log(value[0] + "-" + value[1])
        }
    });
});