1. 程式人生 > >laydate自定義開始日期和結束日期

laydate自定義開始日期和結束日期

由於苦於沒有找到好用的開始日期和結束日期限制的日曆工具,偶然間遇到了這個,感覺很實用,所以記錄了下來,方便以後隨時查閱使用。

laydate.render({
elem: '#test1',  //指定元素
type:'datetime',  //可選擇:年月日時分秒
format: 'yyyy/MM/dd HH:mm:ss',  //時間格式  
min: -0,  //最小日期為當前日期的前一天 
max: '2222-06-16 23:59:59',  //最大日期
theme: '#393D49'  //自定義主題顏色
});
這是基本的樣式,type裡面的date設定日期,time設定時分秒。

1、我有兩個input框,需要限制開始日期和結束日期:

<input placeholder="開始日期" class="" id="beginTime" name="">    
<input placeholder="結束日期" class="" id="endTime" name="">

//開始時間
var start = laydate.render({
elem: '#beginTime',
type:'datetime',  //可選擇:年月日時分秒
min: -0,  //最小日期為當前日期的前一天 
max: '2099-6-16 23:59:59',
trigger: 'click', //採用click彈出
done: function (value, date, endDate) {
end.config.min = {
year: date.year,
 month: date.month - 1,
 date: date.date,
 hours: date.hours,
 minutes: date.minutes,
 seconds: date.seconds
}; //開始日選好後,重置結束日的最小日期
end.config.value = {
  year: date.year,
  month: date.month - 1,
  date: date.date,
   hours: date.hours,
  minutes: date.minutes,
  seconds: date.seconds
}; //將結束日的初始值設定為開始日
}
});
//結束時間
var end = laydate.render({
elem: '#endTime',
type:'datetime',  //可選擇:年月日時分秒
min: -0,  //最小日期為當前日期的前一天 
max: '2099-6-16 23:59:59',
trigger: 'click', //採用click彈出
done: function (value, date, endDate) {
start.config.max = {
 year: date.year,
 month: date.month - 1,
 date: date.date,
 hours: date.hours,
 minutes: date.minutes,
 seconds: date.seconds
 }; //結束日選好後,重置開始日的最大日期
}
 });