|
|
/**
|
|
|
* 时间范围滑块选择插件
|
|
|
* 基于 layui.slider 扩展的时间范围选择插件
|
|
|
*
|
|
|
* sliderTime.js License By momo
|
|
|
* V1.0 2021-04-19
|
|
|
*
|
|
|
*
|
|
|
* 使用说明：
|
|
|
* 1.sliderTime 基于 layui.slider，所以 slider 的配置都得以保留
|
|
|
* 2.range 参数强制为 true
|
|
|
* 3.新增 disabledValue 属性，禁止选择时间范围
|
|
|
* 例如：[[8:00, 10:00], [14:00, 15:00]]
|
|
|
* 4.新增 disabledText 属性，禁止选择时间范围被选中后的提示内容，不配置不显示提示
|
|
|
* 例如：'{start} - {end} 已占用'，支持start和end时间占位符
|
|
|
* 5.新增 getValue 方法，返回当前选择的时间段（时间格式）
|
|
|
* 6.新增 isOccupation 方法，返回当前选择的时间段是否包含了禁止选择的时间段
|
|
|
* 7.新增 numToTime 公用方法，用于将十进制转为时间格式。例如：480 → 08:00
|
|
|
* 8.新增 timeToNum 公用方法，用于将时间格式转为十进制。例如：24:00 → 1440
|
|
|
*/
|
|
|
layui.define(['slider'], function (exports) {
|
|
|
"use strict";
|
|
|
var MOD_NAME = 'sliderTime',
|
|
|
$ = layui.jquery,
|
|
|
slider = layui.slider;
|
|
|
;
|
|
|
|
|
|
/**
|
|
|
* 外部接口
|
|
|
*/
|
|
|
var SliderTime = {
|
|
|
config: {}
|
|
|
/**
|
|
|
* 核心入口
|
|
|
*/
|
|
|
, render: function (options) {
|
|
|
var object = new Class(options);
|
|
|
return thisSliderTime.call(object);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 数字转时间格式
|
|
|
*/
|
|
|
, numToTime: function (value) {
|
|
|
var hours = Math.floor(value / 60);
|
|
|
var mins = (value - hours * 60);
|
|
|
return (hours < 10 ? "0" + hours : hours) + ":" + (mins < 10 ? "0" + mins : mins);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 时间转数字
|
|
|
*/
|
|
|
, timeToNum: function (value) {
|
|
|
var time = value.split(":");
|
|
|
return time[0] * 60 + parseInt(time[1]);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 构造器
|
|
|
*/
|
|
|
var Class = function (options) {
|
|
|
var that = this;
|
|
|
that.config = $.extend({}, SliderTime.config, options);
|
|
|
that.render();
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 操作当前实例
|
|
|
*/
|
|
|
var thisSliderTime = function () {
|
|
|
var that = this
|
|
|
, options = that.config;
|
|
|
|
|
|
return {
|
|
|
/**
|
|
|
* 设置时间段
|
|
|
*/
|
|
|
setValue: function (value, index) {
|
|
|
if (index !== 1) {
|
|
|
index = 0;
|
|
|
}
|
|
|
value = SliderTime.timeToNum(value);
|
|
|
var start, end, width,
|
|
|
$wrap = $(options.elem).find('.layui-slider-wrap'),
|
|
|
val = [$wrap.eq(0).data("value"), $wrap.eq(1).data("value")];
|
|
|
if (value === val[0] || value === val[1]) {
|
|
|
// 设置值等于当前最小或最大值，不移动
|
|
|
return;
|
|
|
} else if (value > val[1]) {
|
|
|
// 设置值大于当前最大值，移动后面圆点
|
|
|
val[1] > val[0] ? index = 1 : index = 0;
|
|
|
val[index] = value;
|
|
|
} else if (value < val[0]) {
|
|
|
// 设置值小于当前最小值，移动前面圆点
|
|
|
val[0] < val[1] ? index = 0 : index = 1;
|
|
|
val[index] = value;
|
|
|
} else {
|
|
|
// 设置值间与中间，则按照index移动
|
|
|
index === 0 ? val[0] = value : val[1] = value;
|
|
|
}
|
|
|
$wrap.eq(index).data("value", value);
|
|
|
|
|
|
start = (val[0] - options.min) / (options.max - options.min) * 100;
|
|
|
end = (val[1] - options.min) / (options.max - options.min) * 100;
|
|
|
// 设置圆点位置
|
|
|
if ("vertical" === options.type) {
|
|
|
$(options.elem).find('.layui-slider-wrap').eq(index).css("bottom", (index === 0 ? start : end) + '%');
|
|
|
} else {
|
|
|
$(options.elem).find('.layui-slider-wrap').eq(index).css("left", (index === 0 ? start : end) + '%');
|
|
|
}
|
|
|
// 设置滑动位置
|
|
|
width = Math.abs(end - start);
|
|
|
if ("vertical" === options.type) {
|
|
|
$(options.elem).find('.layui-slider-bar').css({
|
|
|
"height": width + '%',
|
|
|
"bottom": (start < end ? start : end) + '%'
|
|
|
});
|
|
|
} else {
|
|
|
$(options.elem).find('.layui-slider-bar').css({
|
|
|
"width": width + '%',
|
|
|
"left": (start < end ? start : end) + '%'
|
|
|
});
|
|
|
}
|
|
|
return;
|
|
|
// return that.slider.setValue(SliderTime.timeToNum(value), index)
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 获取选中的时间段
|
|
|
*/
|
|
|
, getValue: function () {
|
|
|
var $wrap = $(options.elem).find('.layui-slider-wrap');
|
|
|
var value = [$wrap.eq(0).data("value"), $wrap.eq(1).data("value")];
|
|
|
//如果前面的圆点超过了后面的圆点值，则调换顺序
|
|
|
if (value[0] > value[1]) {
|
|
|
value.reverse();
|
|
|
}
|
|
|
return [SliderTime.numToTime(value[0]), SliderTime.numToTime(value[1])];
|
|
|
}
|
|
|
/**
|
|
|
* 选择的时间段是否包含被禁止选择的时间段
|
|
|
* 包含：返回禁止选择的时间段
|
|
|
* 不包含：false
|
|
|
*/
|
|
|
, isOccupation: function () {
|
|
|
if (options.disabledValue) {
|
|
|
var $wrap = $(options.elem).find('.layui-slider-wrap');
|
|
|
var value = [$wrap.eq(0).data("value"), $wrap.eq(1).data("value")];
|
|
|
//如果前面的圆点超过了后面的圆点值，则调换顺序
|
|
|
if (value[0] > value[1]) {
|
|
|
value.reverse();
|
|
|
}
|
|
|
for (var i in options.disabledValue) {
|
|
|
var date = options.disabledValue[i];
|
|
|
var min = SliderTime.timeToNum(date[0]);
|
|
|
var max = SliderTime.timeToNum(date[1]);
|
|
|
if (value[0] > min && value[0] < max
|
|
|
|| value[1] > min && value[1] < max
|
|
|
|| value[0] <= min && value[1] >= max) {
|
|
|
return date;
|
|
|
} else {
|
|
|
that.closeTips(options.elem);
|
|
|
}
|
|
|
}
|
|
|
return false;
|
|
|
} else {
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
, config: options
|
|
|
}
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 滑块渲染
|
|
|
* @param options
|
|
|
*/
|
|
|
Class.prototype.render = function () {
|
|
|
var that = this
|
|
|
, options = that.config;
|
|
|
// 是否显示时刻，默认是
|
|
|
options.showstep = options.showstep == false ? false : true;
|
|
|
// 开启滑块的范围拖拽
|
|
|
options.range = true;
|
|
|
// 最小值，最小为0=0:00
|
|
|
options.min = options.min == undefined || SliderTime.timeToNum(options.min) < 0 ? 0 : SliderTime.timeToNum(options.min);
|
|
|
// 最大值，最大为1440=24*60=24:00
|
|
|
options.max = options.max == undefined || SliderTime.timeToNum(options.max) > 1440 ? 1440 : SliderTime.timeToNum(options.max);
|
|
|
//间隔值不能大于 max
|
|
|
options.step = options.step > options.max ? options.max : options.step;
|
|
|
// 初始值
|
|
|
options.value = typeof (options.value) == 'object' ? options.value : [SliderTime.numToTime(options.min), SliderTime.numToTime(options.min)];
|
|
|
options.value[0] = SliderTime.timeToNum(options.value[0]);
|
|
|
options.value[1] = SliderTime.timeToNum(options.value[1]);
|
|
|
|
|
|
// 初始化
|
|
|
that.slider = slider.render({
|
|
|
elem: options.elem
|
|
|
, type: options.type
|
|
|
, height: options.height
|
|
|
, theme: options.theme
|
|
|
, range: options.range
|
|
|
, showstep: options.showstep
|
|
|
, min: options.min
|
|
|
, max: options.max
|
|
|
, step: options.step
|
|
|
, value: options.value
|
|
|
, disabled: options.disabled
|
|
|
, setTips: function (value) {
|
|
|
value = SliderTime.numToTime(value);
|
|
|
if (options.setTips) {
|
|
|
return options.setTips(value);
|
|
|
} else {
|
|
|
return value;
|
|
|
}
|
|
|
}
|
|
|
, change: function (value) {
|
|
|
if (options.disabledValue && options.disabledText) {
|
|
|
// 当滑动到禁用时间范围时，自动提醒
|
|
|
for (var i in options.disabledValue) {
|
|
|
var date = options.disabledValue[i];
|
|
|
var min = SliderTime.timeToNum(date[0]);
|
|
|
var max = SliderTime.timeToNum(date[1]);
|
|
|
if (value[0] > min && value[0] < max
|
|
|
|| value[1] > min && value[1] < max
|
|
|
|| value[0] <= min && value[1] >= max) {
|
|
|
var disabledText = options.disabledText.replace('{start}', date[0]).replace('{end}', date[1])
|
|
|
that.showTips(options, disabledText)
|
|
|
break;
|
|
|
} else {
|
|
|
that.closeTips(options.elem);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
if (options.change) {
|
|
|
options.change(value);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 扩展元素
|
|
|
$(options.elem).find('.layui-slider')
|
|
|
// 开始结尾刻度时间
|
|
|
.append('<div class="step-start-num">' + SliderTime.numToTime(options.min) + '</div>')
|
|
|
.append('<div class="step-end-num">' + SliderTime.numToTime(options.max) + '</div>')
|
|
|
// 警告提示Tips
|
|
|
.append('<div class="slider-danger-tips"></div>');
|
|
|
if (options.showstep) {
|
|
|
// 开始结尾刻度标识
|
|
|
$(options.elem).find('.layui-slider')
|
|
|
.append('<div class="step-start-wrap"></div>')
|
|
|
.append('<div class="step-end-wrap"></div>');
|
|
|
}
|
|
|
|
|
|
|
|
|
// 定义整点和半点时刻标识
|
|
|
var $steps = $(options.elem).find('.layui-slider .layui-slider-step');
|
|
|
for (var i = 0, num = options.min; num <= options.max && i < $steps.length - 1; i++, num += options.step) {
|
|
|
if (that.numToMins(num) == 0 && i > 0) {
|
|
|
$steps.eq(i - 1).addClass('step-hour');
|
|
|
|
|
|
} else if (that.numToMins(num) == 30) {
|
|
|
$steps.eq(i - 1).addClass('step-half-hour');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 初始化选中禁止选择时间范围
|
|
|
if (options.disabledValue) {
|
|
|
options.disabledValue.forEach(function (date) {
|
|
|
var dateNum = [SliderTime.timeToNum(date[0]), SliderTime.timeToNum(date[1])];
|
|
|
|
|
|
var start = (dateNum[0] - options.min) / (options.max - options.min) * 100,
|
|
|
end = (dateNum[1] - options.min) / (options.max - options.min) * 100,
|
|
|
width = end - start;
|
|
|
var selectedSlider = '<div class="layui-slider-bar-selected layui-disabled" style=" ' + ("vertical" === options.type ? "height" : "width") + ':' + width + '%; ' + ("vertical" === options.type ? "bottom" : "left") + ':' + start + '% ;"></div>';
|
|
|
$(options.elem).find('.layui-slider-bar').after(selectedSlider);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 主题设置
|
|
|
if (options.theme) {
|
|
|
$(options.elem).find('.step-hour,.step-half-hour,.step-start-wrap,.step-end-wrap,.layui-slider-step').css("background", options.theme);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 数字转分钟
|
|
|
*/
|
|
|
Class.prototype.numToMins = function (value) {
|
|
|
var hours = Math.floor(value / 60);
|
|
|
var mins = (value - hours * 60);
|
|
|
return mins;
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 显示警告信息
|
|
|
*/
|
|
|
Class.prototype.showTips = function (options, text) {
|
|
|
if ("vertical" === options.type) {
|
|
|
$(options.elem).find('.slider-danger-tips').css({
|
|
|
"display": "block",
|
|
|
"bottom": $(options.elem).find('.layui-slider-tips')[0].style.bottom
|
|
|
}).text(text);
|
|
|
} else {
|
|
|
$(options.elem).find('.slider-danger-tips').css({
|
|
|
"display": "block",
|
|
|
"left": $(options.elem).find('.layui-slider-tips')[0].style.left
|
|
|
}).text(text);
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 关闭警告信息
|
|
|
*/
|
|
|
Class.prototype.closeTips = function (elem) {
|
|
|
$(elem).find('.slider-danger-tips').css({
|
|
|
"display": "none"
|
|
|
}).text('');
|
|
|
};
|
|
|
|
|
|
// 加载css
|
|
|
layui.link(layui.cache.base + 'sliderTime/sliderTime.css');
|
|
|
exports(MOD_NAME, SliderTime);
|
|
|
}); |
