最近項目中使用了laydate插件,需要限制開始時間和結束時間的輸入
1.type=date
要求:周期開始時間和周期結束時間以天為單位,結束時間不能早於開始時間,可以是同一天。
周期開始時間:<input class="layui-input" type="text" id="CycleStartTime">
周期結束時間:<input class="layui-input" type="text" id="CycleEndTime">
var cycleStart = laydate.render({
elem: '#CycleStartTime'
,type: 'date'
,btns: ['confirm']
,done: function(value, date){
cycleEnd.config.min = getDateArray(date);
}
});
var cycleEnd = laydate.render({
elem: '#CycleEndTime'
,type: 'date'
,btns: ['confirm']
,done: function(value, date){
cycleStart.config.max = getDateArray(date);
}
});
function getDateArray(date){
var formatDate = {};
formatDate.year = date.year;
formatDate.month = date.month - 1;
formatDate.date = date.date;
return formatDate;
}
2.type=datetime
要求:開始時間早於結束時間,且不能相同
開始時間:<input class="layui-input" type="text" id="StartTime">
結束時間:<input class="layui-input" type="text" id="EndTime">
var editStart = laydate.render({
elem: '#StartTime'
,type: 'datetime'
,btns: ['confirm']
,done: function(value, date) {
editEnd.config.min = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds + 1
};
if (date.seconds == 59) {
editEnd.config.min.minutes = date.minutes + 1;
editEnd.config.min.seconds = 0;
}
if (date.seconds == 59 && date.minutes == 59) {
editEnd.config.min.hours = date.hours + 1;
editEnd.config.min.minutes = 0;
editEnd.config.min.seconds = 0;
}
if (date.seconds == 59 && date.minutes == 59 && date.hours == 23) {
editEnd.config.min.date = date.date + 1;
editEnd.config.min.hours = 0;
editEnd.config.min.minutes = 0;
editEnd.config.min.seconds = 0;
}
}
});
var editEnd = laydate.render({
elem: '#EndTime'
,type: 'datetime'
,btns: ['confirm']
,done: function(value, date) {
editStart.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds - 1
}
if (date.seconds == 0) {
editStart.config.max.minutes = date.minutes - 1;
editStart.config.max.seconds = 59;
}
if (date.seconds == 0 && date.minutes == 0) {
editStart.config.max.hours = date.hours - 1;
editStart.config.max.minutes = 59;
editStart.config.max.seconds = 59;
}
if (date.seconds == 0 && date.minutes == 0 && date.hours == 0) {
editStart.config.max.date = date.date - 1;
editStart.config.max.hours = 23;
editStart.config.max.minutes = 59;
editStart.config.max.seconds = 59;
}
}
});
說明:輸入限制的情況下,必須去掉【清空】、【現在】按鈕。
3.type=time
要求:開始時間早於結束時間,且不能相同
開始時間:<input class="layui-input" type="text" id="StartTime_add">
結束時間:<input class="layui-input" type="text" id="EndTime_add">
var addStart = laydate.render({
elem: '#StartTime_add'
,type: 'time'
,btns: ['confirm']
,done: function(value, date) {
addEnd.config.min = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds + 1
};
if (date.seconds == 59) {
addEnd.config.min.minutes = date.minutes + 1;
addEnd.config.min.seconds = 0;
}
if (date.seconds == 59 && date.minutes == 59) {
addEnd.config.min.hours = date.hours + 1;
addEnd.config.min.minutes = 0;
addEnd.config.min.seconds = 0;
}
if (date.seconds == 59 && date.minutes == 59 && date.hours == 23) {
$('.laydate-footer-btns').css({
'cursor': 'not-allowed',
'color': '#d2d2d2'
});
alert('開始時間不允許選擇23:59:59');
}
}
});
var addEnd = laydate.render({
elem: '#EndTime_add'
,type: 'time'
,btns: ['confirm']
,done: function(value, date) {
addStart.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds - 1
}
if (date.seconds == 0) {
addStart.config.max.minutes = date.minutes - 1;
addStart.config.max.seconds = 59;
}
if (date.seconds == 0 && date.minutes == 0) {
addStart.config.max.hours = date.hours - 1;
addStart.config.max.minutes = 59;
addStart.config.max.seconds = 59;
}
if (date.seconds == 0 && date.minutes == 0 && date.hours == 0) {
$('.laydate-footer-btns').css({
'cursor': 'not-allowed',
'color': '#d2d2d2'
});
alert('結束時間不允許選擇00:00:00');
}
}
});
說明:開始時間不允許選擇23:59:59,結束時間不允許選擇00:00:00。