layui 第三方組件平臺(tái)

返回首頁(yè) 發(fā)布組件

基于 layui.slider 擴(kuò)展的時(shí)間范圍選擇插件

更新:2021-5-8 創(chuàng)建:2021-5-2

文檔



Demo
SliderTime 時(shí)間范圍滑塊選擇

示例
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"]] // 回顯禁止選擇時(shí)間段
, disabledText: '{start} ~ {end} 已占用'
, setTips: function (value) {
//自定義提示文本
return sliderTime.numToTime(value);
}, change: function (value) {
console.log(value[0] + "-" + value[1])
}
});
});
使用說(shuō)明
1.sliderTime 基于 layui.slider,所以 slider 的配置都得以保留
2.range 參數(shù)強(qiáng)制為 true
3.新增 disabledValue 屬性,禁止選擇時(shí)間范圍。例如:[["10:00", "10:30"], ["14:00", "15:30"]]
4.新增 disabledText 屬性,禁止選擇時(shí)間范圍被選中后的提示內(nèi)容,不配置不顯示提示。例如:'{start} - {end} 已占用',支持start和end時(shí)間占位符
5.新增 getValue 方法,返回當(dāng)前選擇的時(shí)間段(時(shí)間格式)
6.新增 isOccupation 方法,返回當(dāng)前選擇的時(shí)間段是否包含了禁止選擇的時(shí)間段
7.新增 numToTime 公用方法,用于將十進(jìn)制轉(zhuǎn)為時(shí)間格式。例如:480 → 08:00
8.新增 timeToNum 公用方法,用于將時(shí)間格式轉(zhuǎn)為十進(jìn)制。例如:24:00 → 1440

下載

去碼云下載
該擴(kuò)展組件由第三方用戶主動(dòng)投遞,并由其自身進(jìn)行維護(hù),本站僅做收集。