laydate自定義開始日期和結束日期
阿新 • • 發佈:2019-02-14
由於苦於沒有找到好用的開始日期和結束日期限制的日曆工具,偶然間遇到了這個,感覺很實用,所以記錄了下來,方便以後隨時查閱使用。
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 }; //結束日選好後,重置開始日的最大日期 } });