laydate限制结束时间大于开始时间,并且开始时间大于现在时间
代码如下
<div class="layui-inline">
<lable>开始时间:</lable>
<input type="text" class="layui-input" id="test1" >
<lable>结束时间:</lable>
<input type="text" class="layui-input" id="test2">
</div>
js代码
layui.use('laydate', function(){
var layer = layui.layer;
var laydate = layui.laydate;
var startTime = 0;
var endTime = 0;
function formDatrToTimestamp(dateString) {//将日期转化为时间戳
var timestamp = Date.parse(new Date(dateString)) / 1000;
return timestamp;
}
laydate.render({
elem: '#test1',
// min: new Date().toLocaleDateString(),
min: new Date().toLocaleDateString(),
min : laydate.now(),
done: function (value, date, endDate) {
console.log(value); //得到日期生成的值,如:2017-08-18
console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
/console.log(value + '的时间戳为' + formDatrToTimestamp(value));
startTime = formDatrToTimestamp(value);
if (endTime != 0 && endTime < startTime) {
layer.msg("时间范围不合法");
}
}
});
laydate.render({
elem: '#test2', //指定元素
min: new Date().toLocaleDateString(),
done: function (value, date, endDate) {
console.log(value); //得到日期生成的值,如:2017-08-18
console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
console.log(value + '的时间戳为' + formDatrToTimestamp(value));
endTime = formDatrToTimestamp(value);
if ( endTime < startTime) {
layer.msg("时间范围不合法");
}
}
});
});
之前实现限制日期的功能用的都是js代码,没用过插件。
避免结束时间小于开始时间,可以直接使用range开启左右面板范围选择,还可以用max,和min限制开始和结束日期的范围保证结束日期的最小值大于开始日期的最大值。在没有明确的范围限制的情况下,可通过上述代码解决。
1.获取现在时间,网上好多用的layDate.now(),但是新版layDate已经找不到这个方法了,有没有代替他的方法,我也母鸡,所以完全可以使用 js 原生的 Date 对象,但是在这里要用tolocaleDateString把日期转化成数字格式才能匹配。
min: new Date().toLocaleDateString()
2.比较开始时间和结束时间,我习惯把他们转化成时间戳然后进行比较
刚开始我只在结束时间的回调函数里进行比较,但是这样有个bug,如果先输入结束时间再输入开始时间,则无法判断。所以要在开始时间的回调函数里判断结束时间是否存在,存在即进行判断。
if (endTime != 0 && endTime < startTime) {
layer.msg("时间范围不合法");
}