主要實現功能:
採集時間分為開始時間與結束時間,需限定時間段內數據在一年以內超過一年不允許進行選擇;
實現代碼及步驟:
1.首先考慮開始實現需要限定的時間,如果超出一年則不允許選擇,若結束時間向前推移一個月此時開始時間也需要向前推一個月;
2.結束時間需要控制在當前時間範圍內,如果修改時間需要將值付給開始時間限定的當前時間,將之前獲取的時間進行置換;
3.最終實現效果,選擇好結束時間後需要根據時間推斷開始時間是否在限制範圍內,若在限制範圍內則允許選擇,若不在限制範圍內則不允許選擇
實現代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./frame/layui/css/layui.css" media="all">
<!-- 注意:如果你直接複製所有代碼到本地,上述css路徑需要改成你本地的 -->
</head>
<body>
<fieldset style="margin-top: 30px;">
<legend>時間選擇器</legend>
</fieldset>
<div>
<div>
<div>
<label>開始時間</label>
<div>
<input type="text" id="startTime" placeholder="yyyy-MM-dd HH:mm:ss">
</div>
</div>
<label>結束時間</label>
<input type="text" id="endTime" placeholder="yyyy-MM-dd HH:mm:ss">
</div>
</div>
</div>
<script src="./frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接複製所有代碼到本地,上述js路徑需要改成你本地的 -->
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//當前時間
var nowTime = getNowFormatDate();
//日期時間選擇器
var startDate = laydate.render({
elem: '#startTime'
,type: 'datetime'
});
var endDate = laydate.render({
elem: '#endTime'
,type: 'datetime'
,max: getNowDate()
,done:function(value,date,endDate){
startDate.config.min = getDateArray(date);//重點修改時間插件代碼
}
})
//當前時間
function getNowDate(){
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = (nowDate.getMonth()+1)<10?'0'+ (nowDate.getMonth()+1):(nowDate.getMonth()+1);
var day = (nowDate.getDate())<10?('0'+nowDate.getDate()):(nowDate.getDate());
return year+"-"+month+"-"+day+" 23:59:59";
}
function getDateArray(date){//獲取時間數組
var darray={};
darray.year=date.year-1;
darray.month=date.month - 1;
var day=date.date;
if(date.hours == 23 && date.minutes == 59 && date.seconds == 59){
day = day + 1;
}else{
darray.hours = date.hours;
darray.minutes = date.minutes;
darray.seconds = date.seconds;
}
darray.date=day;
return darray;
});
</script>
</body>
</html>