layui时间日期控件laydate设置默认值，并且结束时间大于
2020-01-06 本文已影响0人
菜菜___
使用layui的laydate控件做开始日期和结束日期的查询，并且默认查询近一个月，在做的过程中发现很多细节需要注意，在此记录下。
laydate使用官方文档给了很多详细的举例
根据文档，首先为控件赋默认值，并且业务要求能查到的最新日期是今天，开始日期不能大于结束日期，因此需要在定义的时候做出以下限制。由于结束日期有默认值是昨天，而开始日期可以选择今天，因此在选择开始日期后的回调里需要判断当前开始日期是否大于结束日期，若大于结束日期则清空结束日期。
//开始日期
var start = laydate.render({
elem: '#start_date',
max:0,//最大值为当前日期
eventElem: '#start_date_icon',//日期输入框的图标，给图标也绑定点击事件
trigger: 'click',
value: getRecentDay(-30),//默认值30天前
done:function(value,date){
if(value && (value>$("#end_date").val())){
/*开始时间大于结束时间时，清空结束时间*/
$("#end_date").val("");
}
end.config.min ={
year:date.year,
month:date.month-1,
date: date.date,
};
}
});
//结束日期
var end = laydate.render({
elem: '#end_date',
max : 0,//最大值为当前日期
eventElem: '#end_date_icon',//日期输入框的图标，给图标也绑定点击事件
trigger: 'click',
value: getRecentDay(-1),//默认值昨天
done:function(value,date){
start.config.max={
year:date.year,
month:date.month-1,
date: date.date,
}
}
});
/**获取近N天*/
function getRecentDay(day){
var today = new Date();
var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
today.setTime(targetday_milliseconds);
var tYear = today.getFullYear();
var tMonth = today.getMonth();
var tDate = today.getDate();
tMonth = doHandleMonth(tMonth + 1);
tDate = doHandleMonth(tDate);
return tYear+"-"+tMonth+"-"+tDate;
}
function doHandleMonth(month){
var m = month;
if(month.toString().length == 1){
m = "0" + month;
}
return m;
}
页面元素：
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" id="start_date" name="start_date" placeholder="如：2019-01-01" lay-verify='date' class="layui-input"/>
<i class="layui-icon layui-icon-date" id="start_date_icon"></i>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-inline">
<input type="text" id="end_date" name="end_date" placeholder="如：2019-02-01" lay-verify='date' class="layui-input"/>
<i class="layui-icon layui-icon-date" id="end_date_icon"></i>
</div>
</div>
效果图如下：
由于日期控件是输入框text类型，用户也可以使用键盘输入，使用键盘输入的时候需要校验日期格式，并且在用户输完进行搜索的时候需要再次校验当前开始日期是否大于结束日期，这样才算是一个完整的日期查询。
踩坑记录
为了直观看出是日期控件在输入框右侧加上日期图标，但是发现点击不会弹出日期控件，点空白处可以，此处不知道为什么阻止了事件的冒泡，因此为图标也绑定input的点击事件
laydate.render({
elem: '#start_date',
eventElem: '#start_date_icon',//日期输入框的图标，给图标也绑定点击事件
trigger: 'click'
})
