layUI js
<script src="<%=basePath%>lib/layui/layui.js" charset="utf-8"></script>
日期控件
<div class="layui-inline layui-col-md12 x-so">
<label class="layui-form-label">受理时间:</label>
<input class="layui-input" placeholder="开始时间" id="start" readonly="readonly">
<input class="layui-input" placeholder="结束时间" id="end" readonly="readonly">
<button class="btn"><i class="layui-icon"></i></button>
</div>
js
<script type="text/javascript">
layui.use(['layer', 'laydate'], function(){
var laydate = layui.laydate;
var layer = layui.layer;
var start = laydate.render({
elem: '#start',//制定元素
type: 'date',
theme: '#ff7e46',//主题颜色
min: '1900-1-1 00:00:00',
max: '2099-6-16 23:59:59',
trigger:'click',//定义鼠标悬停时弹出控件
done: function (value, date, endDate) {
if(value==""||value==null){
end.config.min = {
year: '1900',
month: '1',
date: '1',
hours: '00',
minutes: '00',
seconds: '00'
}; //开始日选好后,重置结束日的最小日期
}else{
end.config.min = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
};
}
}
});
var end = laydate.render({
elem: '#end',
type: 'date',
theme: '#ff7e46',
min: '1900-1-1 00:00:00',
max: '2099-6-16 23:59:59',
trigger:'click',//定义鼠标悬停时弹出控件
done: function (value, date, endDate) {
if(value==""||value==null){
start.config.max = {
year:'2099',
month:'6',
date:'16',
hours:'23',
minutes:'59',
seconds:'59'
}; //结束日选好后,重置开始日的最大日期
}else{
start.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
};
}
}
});
});
</script>
这样就OK了
上图看结果
这个时候可以看到六月八号之前是灰色的不可选
而空间中的readonly=“readonly” 属性就是防止用户直接在输入框中输入非法数据
这样就彻底解决问题了