Laydate控件设置初始与结束时间限制
Posted lovoo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Laydate控件设置初始与结束时间限制相关的知识，希望对你有一定的参考价值。
1、实现功能要求：
当选择了开始时间后，结束时间必须大于等于开始时间，当选择了结束时间，开始时间必须小于等于结束时间
2、效果如图：
3、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table 动态添加行</title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
</head>
<body>
<div id="kPage" class="layui-fluid" style="padding: 0">
<div class="layui-row">
<div class="layui-card">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始日期：</label>
<div class="layui-input-inline">
<input name="start_date" id="start_date" class="layui-input" type="text" autocomplete="off"/> 
</div>
<label class="layui-form-label">结束日期：</label>
<div class="layui-input-inline">
<input name="end_date" id="end_date" class="layui-input" type="text" autocomplete="off"/> 
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
layui.use(["table", "laydate", "layer"], function () {
var laydate = layui.laydate;
//设置开始时间
var startDate = laydate.render({
elem: '#start_date',//开始时间选择控件id
min: '2018-6-1',
type: 'datetime',
format: 'yyyy-MM-dd HH:mm', //可任意组合
done: function (value, date) {
if (value !== '') {
endDate.config.min.year = date.year;
endDate.config.min.month = date.month - 1;
endDate.config.min.date = date.date;
endDate.config.min.hours = date.hours;
endDate.config.min.minutes = date.minutes;
} else {
endDate.config.min.year = '';
endDate.config.min.month = '';
endDate.config.min.date = '';
endDate.config.min.hours = '';
endDate.config.min.minutes = '';
}
}
});
//设置结束时间
var endDate = laydate.render({
elem: '#end_date',//结束时间选择控件id
type: 'datetime',
format: 'yyyy-MM-dd HH:mm', //可任意组合
done: function (value, date) {
if (value !== '') {
startDate.config.max.year = date.year;
startDate.config.max.month = date.month - 1;
startDate.config.max.date = date.date;
startDate.config.max.hours = date.date;
startDate.config.max.minutes = date.date;
} else {
startDate.config.max.year = '';
startDate.config.max.month = '';
startDate.config.max.date = '';
startDate.config.max.hours = '';
startDate.config.max.minutes = '';
}
}
});
})
</script>
</body>
</html>
以上是关于Laydate控件设置初始与结束时间限制的主要内容，如果未能解决你的问题，请参考以下文章
laydate设置起始时间，laydate设置开始时间和结束时间