说明:根据时间片(天,月,季度等)来限定开始时间和结束时间的区间范围落在该时间片内。

举例:开始时间选择十月五号,时间片选择月,那么结束时间只能选择十月五号到十月三十一号之间的任何时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="layui-form-item" >
<label class="layui-form-label" style="width: 100px">
试跑日期:
</label>
<div class="layui-inline">
<input class="layui-input" lay-verify="required" type="text" id="runTimeStart" name="runTimeStart" readonly/>
</div>---&nbsp;
<div class="layui-inline">
<input class="layui-input" lay-verify="required" type="text" id="runTimeEnd" name="runTimeEnd" readonly/>
</div>
</div>

<div class="layui-form-item">
<label class="layui-form-label" style="width: 100px">
<span class="we-red">*</span>时间片:
</label>
<div class="layui-input-inline">
<select lay-filter="slotSelect" id="slotSelect" name="slot">
<option value="day"></option>
<option value="week"></option>
<option value="month"></option>
<option value="season" >季度</option>
</select>
</div>
</div>

选择时间片后进行改变时间限定,主要区分季度和当月,原因时数据库根据月份数据分表,需要根据月份查不同的表。layui的时间选择器使用方法可以看看官方文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
layui.use(['laydate', 'jquery', 'form','admin'], function() {
var laydate = layui.laydate,
$ = layui.jquery,
admin = layui.admin;
var form = layui.form;
var startTime;
var endTime;
//执行一个laydate实例
startTime = laydate.render({
elem: '#runTimeStart',//指定元素
showBottom: false,
done:function(value,date){ //指定开始时间时限定结束时间最大最小日期
if (date.year != null) {
var solotSelect = $("#slotSelect").val();
if (solotSelect != "season"){
endTime.config.min={
year:date.year,
month:date.month-1,
date:date.date
};
endTime.config.max={
year:date.year,
month:date.month-1,
date:laydate.getEndDate()
};
}else {
endTime.config.min={
year:date.year,
month:date.month-1,
date:date.date
};
endTime.config.max={
year:date.year,
month:date.month+1,
date:laydate.getEndDate()-1
};
}
}
}
});
endTime = laydate.render({
elem: '#runTimeEnd',//指定元素
showBottom: false,
done:function(value,date){ //指定结束时间时限定开始时间最大最小日期
if (date.year != null){
var solotSelect = $("#slotSelect").val();
if (solotSelect != "season"){
startTime.config.min={
year:date.year,
month:date.month-1
};
startTime.config.max={
year:date.year,
month:date.month-1,
date:date.date
};
}else {
startTime.config.min={
year:date.year,
month:date.month-3
};
startTime.config.max={
year:date.year,
month:date.month-1,
date:date.date
};
}
}
}
});
});