html
<div class=" layui-form-item">
<label class="layui-form-label">开始时间<span style="color: red"> *</span> </label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="start" >
</div>
</div>
<div class=" layui-form-item">
<label class="layui-form-label">结束时间<span style="color: red"> *</span> </label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="end" >
</div>
</div>
js
//开始时间为当前时间,其实就是设置开始时间的最小时间为当前时间
// 设置最小可选的日期
function minDate(){
var now = new Date();
var month= now.getMonth()+1;
month= month<10?('0'+month):month;
var day=now.getDate();
day=day<10?('0'+day):day; //替换2019-1-1为2019-01-01
console.log(now.getFullYear()+"-" +month+ "-" + day);
return now.getFullYear()+"-" +month+ "-" + day;
}
layui.use(['layer', 'form', 'laydate'], function () {
var form = layui.form,
laydate = layui.laydate,
layer = layui.layer,
date=new Date();
//日期选择器
var startDate=laydate.render({//开始时间
elem: '#start',
type: 'date',
format:'yyyy-MM-dd',
min:minDate(),
trigger: 'click', //采用click弹出
value:date,
choose:function(data){
console.log(data);
},
done: function(value, date){
console.log(value); //得到日期生成的值,如:2017-08-18
console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
endDate.config.min ={
year:date.year,
month:date.month-1, //关键
date: date.date
};
}
});
//日期选择器
var endDate=laydate.render({//结束时间
elem: '#end',
type: 'date',
format:'yyyy-MM-dd',
min:minDate(),
trigger: 'click', //采用click弹出
value:date,
choose:function(){
console.log(data);
},
done: function(value, date){
console.log(value); //得到日期生成的值,如:2017-08-18
console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
startDate.config.max={
year:date.year,
month:date.month-1,//关键
date: date.date
};
}
});
});
layui.use(['table', 'laydate', 'layer', 'form'], function () {
var laydate = layui.laydate,
form = layui.form,
table = layui.table,
layer = layui.layer;
//执行一个laydate实例
laydate.render({
elem: '#date1', //指定元素
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',//可任意组合
trigger: 'click', //采用click弹出
closeStop: '#date1', //这里代表的意思是:点击 date1所在元素阻止关闭事件冒泡。如果不设定,则无法弹出控件
value: new Date() //参数即为:2018-08-20 20:08:08 的时间戳 (当天日期)
});
laydate.render({
elem: '#date2', //指定元素
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',//可任意组合
trigger: 'click', //采用click弹出
closeStop: '#date2', //这里代表的意思是:点击 date2所在元素阻止关闭事件冒泡。如果不设定,则无法弹出控件
value: new Date(new Date().getTime()+ 3*24*60*60*1000) //显示当天日期+3天
});
});
参考
https://blog.csdn.net/qq_35979073/article/details/79746539