一,日期组件
标签部分
<input class="layui-input" placeholder="开始日" name="start" id="start">
<input class="layui-input" placeholder="截止日" name="end" id="end">
js部分
<script type="text/javascript" src="./lib/laydate/laydate.js" charset="utf-8"></script>这里只要倒入组件模块即可,不需要另外倒入layui.js否则会报错,找不到laydate。
<script>
var start = laydate.render({
elem: '#beginTime',
type:'datetime', //可选择:年月日时分秒
min: '2018-1-01 00:00:00', //最小日期为当前日期的前一天
max: '2099-6-16 23:59:59',
trigger: 'click', //采用click弹出
done: function (value, date, endDate) {
end.config.min = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}; //开始日选好后,重置结束日的最小日期
end.config.value = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}; //将结束日的初始值设定为开始日
}
});
//结束时间
var end = laydate.render({
elem: '#endTime',
type:'datetime', //可选择:年月日时分秒
min: '2018-1-01 00:00:00', //最小日期为当前日期的前一天
max: '2099-6-16 23:59:59',
trigger: 'click', //采用click弹出
done: function (value, date, endDate) {
start.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds
}; //结束日选好后,重置开始日的最大日期
}
});
</script>
二,layui自带的日期
标签一致。
js部分
<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>此处也只要倒入该标签,不需要另加入组件标签。(根据你的前端的页面的不同,可能会有少许的别的layui的js的倒入)
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
var endDate= laydate.render({
elem: '#endTime',//选择器结束时间
type: 'datetime',
min:"1970-1-1",//设置min默认最小值
done: function(value,date){
startDate.config.max={
year:date.year,
month:date.month-1,//关键
date: date.date,
hours: 0,
minutes: 0,
seconds : 0
}
}
});
//日期范围
var startDate=laydate.render({
elem: '#beginTime',
type: 'datetime',
max:"2099-12-31",//设置一个默认最大值
done: function(value, date){
endDate.config.min ={
year:date.year,
month:date.month-1, //关键
date: date.date,
hours: 0,
minutes: 0,
seconds : 0
};
}
});
});
</script>
注:借鉴并总结,请尊重原创。https://blog.csdn.net/adagio0531/article/details/71272776