前言:
在使用laydate組件的時候,難免會遇到選擇時間段,官網給的文檔中有選擇時間段的組件,但是並不好用,首先只能選擇一個月的時間段,有局限性,其次精確到時間的話要先選日期范圍再選時間范圍,很變態,還是用兩個組件比較合適,但是用兩個組件的話需要做判斷,因為起始時間肯定不能在結束時間之后,反之亦然,本文記錄的是如何解決這一判斷。
效果圖:
1、官網給的效果:
2、需要實現的效果:
假設起始時間如下:
在起始時間之前的時間皆為灰色不可選狀態:
參考代碼:
var time_start =laydate.render({ elem : '#beginTime', type : 'datetime', done: function(value,date, endDate) { time_end.config.min = { year: date.year, month: date.month - 1, date: date.date, hours: date.hours, minutes: date.minutes, seconds: data.seconds } if(compareDate(value,$("#endTime").val())) { $("#endTime").val(""); } } });
var time_end = laydate.render({ elem : '#endTime', type : 'datetime', done: function(value,date, endDate) { time_start.config.max = { year: date.year, month: date.month - 1, date: date.date, hours: date.hours, minutes: date.minutes, seconds: data.seconds } if(compareDate($("#beginTime").val(),value)) { $("#beginTime").val(""); } } });
function compareDate(d1,d2){ return ((new Date(d1.replace(/-/g,"\/"))) > (new Date(d2.replace(/-/g,"\/")))); }