Layui实现日期选择器限定
2020-07-29 本文已影响0人
我是一颗小虎牙_
<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>---
<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的时间选择器使用方法可以看看官方文档。
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
};
}
}
}
});
});