使用layui的laydate控件做開始日期和結(jié)束日期的查詢，并且默認(rèn)查詢近一個(gè)月，在做的過程中發(fā)現(xiàn)很多細(xì)節(jié)需要注意，在此記錄下。
laydate使用官方文檔給了很多詳細(xì)的舉例
根據(jù)文檔，首先為控件賦默認(rèn)值，并且業(yè)務(wù)要求能查到的最新日期是今天，開始日期不能大于結(jié)束日期，因此需要在定義的時(shí)候做出以下限制。由于結(jié)束日期有默認(rèn)值是昨天，而開始日期可以選擇今天，因此在選擇開始日期后的回調(diào)里需要判斷當(dāng)前開始日期是否大于結(jié)束日期，若大于結(jié)束日期則清空結(jié)束日期。
//開始日期
var start = laydate.render({
elem: '#start_date',
max:0,//最大值為當(dāng)前日期
eventElem: '#start_date_icon',//日期輸入框的圖標(biāo)，給圖標(biāo)也綁定點(diǎn)擊事件
trigger: 'click',
value: getRecentDay(-30),//默認(rèn)值30天前
done:function(value,date){
if(value && (value>$("#end_date").val())){
/*開始時(shí)間大于結(jié)束時(shí)間時(shí)，清空結(jié)束時(shí)間*/
$("#end_date").val("");
}
end.config.min ={
year:date.year,
month:date.month-1,
date: date.date,
};
}
});
//結(jié)束日期
var end = laydate.render({
elem: '#end_date',
max : 0,//最大值為當(dāng)前日期
eventElem: '#end_date_icon',//日期輸入框的圖標(biāo)，給圖標(biāo)也綁定點(diǎn)擊事件
trigger: 'click',
value: getRecentDay(-1),//默認(rèn)值昨天
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">開始時(shí)間</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">結(jié)束時(shí)間</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類型，用戶也可以使用鍵盤輸入，使用鍵盤輸入的時(shí)候需要校驗(yàn)日期格式，并且在用戶輸完進(jìn)行搜索的時(shí)候需要再次校驗(yàn)當(dāng)前開始日期是否大于結(jié)束日期，這樣才算是一個(gè)完整的日期查詢。
踩坑記錄
為了直觀看出是日期控件在輸入框右側(cè)加上日期圖標(biāo)，但是發(fā)現(xiàn)點(diǎn)擊不會(huì)彈出日期控件，點(diǎn)空白處可以，此處不知道為什么阻止了事件的冒泡，因此為圖標(biāo)也綁定input的點(diǎn)擊事件
laydate.render({
elem: '#start_date',
eventElem: '#start_date_icon',//日期輸入框的圖標(biāo)，給圖標(biāo)也綁定點(diǎn)擊事件
trigger: 'click'
})
原文作者技術(shù)博客：http://www.itdecent.cn/u/ac4daaeecdfe
