100 lines
3.6 KiB
HTML
100 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
|
|
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.all.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">起始时间</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" id="start-time" lay-verify="date" placeholder="请选择起始时间" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">结束时间</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" id="end-time" lay-verify="date" placeholder="请选择结束时间" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 使用Layui的日期时间范围选择器组件
|
|
layui.use('laydate', function(){
|
|
var laydate = layui.laydate;
|
|
|
|
// 初始化起始时间选择器
|
|
laydate.render({
|
|
elem: '#start-time',
|
|
type: 'datetime',
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|
min: dayOffset(-11) + ' 00:00:00', // 设置最小可选日期
|
|
max: getCurrentDateTime(), // 设置最大可选日期
|
|
theme: 'grid',
|
|
done: function(value, date){
|
|
// 获取起始时间选择器的值
|
|
var startTime = new Date(value).getTime();
|
|
var endTime = new Date($('#end-time').val()).getTime();
|
|
|
|
// // 如果结束时间早于起始时间，则自动修正为与起始时间相同
|
|
// if (endTime < startTime){
|
|
// $('#end-time').val(value);
|
|
// }
|
|
}
|
|
});
|
|
|
|
// 初始化结束时间选择器
|
|
laydate.render({
|
|
elem: '#end-time',
|
|
type: 'datetime',
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|
min: dayOffset(-11) + ' 00:00:00', // 设置最小可选日期
|
|
max: getCurrentDateTime(), // 设置最大可选日期
|
|
theme: 'grid',
|
|
done: function(value, date){
|
|
// 获取结束时间选择器的值
|
|
var startTime = new Date($('#start-time').val()).getTime();
|
|
var endTime = new Date(value).getTime();
|
|
|
|
// 如果结束时间早于起始时间，则自动修正为与起始时间相同
|
|
if (endTime < startTime){
|
|
$('#end-time').val($('#start-time').val());
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// 获取当前日期时间字符串
|
|
function getCurrentDateTime(){
|
|
var now = new Date();
|
|
var year = now.getFullYear();
|
|
var month = padZero(now.getMonth() + 1);
|
|
var day = padZero(now.getDate());
|
|
var hours = padZero(now.getHours());
|
|
var minutes = padZero(now.getMinutes());
|
|
var seconds = padZero(now.getSeconds());
|
|
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
|
|
}
|
|
|
|
// 获取相对于当前日期的偏移量的日期字符串
|
|
function dayOffset(offset){
|
|
var now = new Date();
|
|
now.setDate(now.getDate() + offset);
|
|
var year = now.getFullYear();
|
|
var month = padZero(now.getMonth() + 1);
|
|
var day = padZero(now.getDate());
|
|
return year + '-' + month + '-' + day;
|
|
}
|
|
|
|
// 数字补零函数
|
|
function padZero(num){
|
|
return num < 10 ? '0' + num : num;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |