Layui时间范围选择器,自动填充结束时间
前端HTML代码
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-block">
<input name="beginTimeFrom" type="text" autocomplete="off" id="startTime" class="layui-input laydate">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-block">
<input name="beginTimeTo" type="text" autocomplete="off" id="endTime" class="layui-input laydate">
</div>
</div>
JS 代码
var startTime = laydate.render({
elem: '#startTime',
type: 'date',
btns: ['confirm'],
max: 'nowTime',//默认最大值为当前日期
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}
var year = date.year;
var month = date.month;
var dates = date.date;
if (date.month == 12) {
year + 1;
}
dates = getLastDay(value)
$("#endTime").val(year + "-" + month + "-" + dates);
}
});
var endTime = laydate.render({
elem: '#endTime',
type: 'date',
btns: ['confirm'],
max: 'nowTime',
done: function (value, date) {
var year = date.year;
var month = date.month;
$("#startTime").val(year + "-" + month + "-" + 1);
}
})
function getLastDay(time) {
const arr = time.split('-')
const maxDay = new Date(arr[0], arr[1], 0).getDate() // 获取当月最后一日
return maxDay;
}
效果展示:
第一步:
第二步:
第三步:
效果描述:当开始时间选择完成点击确定后自动再开始时间添加三十天,并将其填充到结束时间的文本框内