layui 第三方组件平台

返回首页 发布组件

基于 layui.slider 扩展的时间范围选择插件

更新:2021-5-8 创建:2021-5-2

文档



Demo
SliderTime 时间范围滑块选择

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

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

var slider = sliderTime.render({
elem: '#id' //绑定元素
, min: sliderTime.timeToNum("8:00")
, max: sliderTime.timeToNum("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])
}
});
});
使用说明
1.sliderTime 基于 layui.slider,所以 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