laydate 日期选择,实现开始日期的选择只能小于结束日期,结束时间的选择只能小于当前日期
HTML:
<li>
<label>时间</label>
<input type="text" id="startTime" class="QItem" name="startTime1"/>
<label>至</label>
<input type="text" id="endTime" class="QItem" name="endTime1"/>
</li>
js:
$(function($){
var myDate = new Date();
var startDateTap = myDate - 259200000; // 开始时间比当前时间小三天,259200000毫秒 = 3天
var startDate = new Date(startDateTap);
var startTime1 = document.getElementById('startTime1');
var endTime1 = document.getElementById('endTime1');
var year = myDate .getFullYear();
var month = myDate .getMonth()+1;
var day = myDate .getDate();
var year1 = endDate.getFullYear();
var month1 = endDate.getMonth()+1;
var day1 = endDate.getDate();
// 赋时间初值
startTime1.value = year +'-'+ add0(month) + '-' + add0(day);
endTime1.value = year1 +'-'+ add0(month1) + '-' + add0(day1);
//设置开始时间
var startDate1 = laydate.render({
elem:'#startTime1',
trigger: 'click',
max: year + '-' + month + '-' + day,
done:function (value, date) {
if (value !== '') {
endDate1.config.min.year = date.year;
endDate1.config.min.month = date.month - 1;
endDate1.config.min.date = date.date;
} else {
endDate1.config.min.year = '';
endDate1.config.min.month = '';
endDate1.config.min.date = '';
}
startTime1 = value;
}
});
//设置结束时间
var endDate1 = laydate.render({
elem:'#endTime1',
trigger: 'click',
min: -3,
max: year + '-' + month + '-' + day,
done:function (value, date) {
if (value !== '') {
startDate1.config.max.year = date.year;
startDate1.config.max.month = date.month - 1;
startDate1.config.max.date = date.date;
} else {
startDate1.config.max.year = '';
startDate1.config.max.month = '';
startDate1.config.max.date = '';
}
endDate1.config.max.year = year;
endDate1.config.max.month = month-1;
endDate1.config.max.date = day;
endTime1 = value;
}
});
// 给小于10 的月、日加前置0
function add0(m){
return m < 10 ? '0'+ m : m ;
}
});
效果图:
laydate月份选择:
HTML:
<label >时间</label>
<input type="text" id="startTime2" class="QItem" name="startTime2"/>
<label>至</label>
<input type="text" id="endTime2" class="QItem" name="endTime2"/>
js:不知道为什么月份选择done事件无法触发,只能使用change了。
if($(".layui-laydate").length){
$(".layui-laydate").remove();
}
用来点击后关闭弹窗
$(function($){
var myDate = new Date();
var startTime2 = document.getElementById('startTime2');
var endTime2 = document.getElementById('endTime2');
var year = myDate.getFullYear();
var month = myDate.getMonth()+1;
var day = myDate.getDate();
// 赋时间初值,开始时间比结束时间早一个月
if (month1 == 1){
startTime2.value = (year - 1) +'-'+ 12;
endTime2.value = year +'-'+ add0(month) ;
} else {
startTime2.value = year +'-'+ add0(month-1);
endTime2.value = year +'-'+ add0(month) ;
}
//设置开始时间
var startDate2 = laydate.render({
elem:'#startTime2',
trigger: 'click',
type: 'month',
showBottom: false,
max: year+'-'+month,
change:function (value, date, endDate) {
if (value !== '') {
endDate2.config.min.year = date.year;
endDate2.config.min.month = date.month - 1;
} else {
endDate2.config.min.year = '';
endDate2.config.min.month = '';
}
startDate2.config.max.year = year;
startDate2.config.max.month = month-1;
$('#startTime2').val(value);
if($(".layui-laydate").length){
$(".layui-laydate").remove();
}
}
});
//设置结束时间
var endDate2 = laydate.render({
elem:'#endTime2',
trigger: 'click',
type: 'month',
//format: 'yyyy年MM月',
showBottom: false,
min: -31,
max: year+'-'+month,
change:function (value, date, endDate) {
if (value !== '') {
startDate2.config.max.year = date.year;
startDate2.config.max.month = date.month - 1;
} else {
startDate2.config.max.year = year;
startDate2.config.max.month = month-1;
}
endDate2.config.max.year = year;
endDate2.config.max.month = month-1;
$('#endTime2').val(value);
if($(".layui-laydate").length){
$(".layui-laydate").remove();
}
}
});
// 给小于10 的月、日加前置0
function add0(m){
return m < 10 ? '0'+ m : m ;
}
});
效果图: