由于苦于没有找到好用的开始日期和结束日期限制的日历工具,偶然间遇到了这个,感觉很实用,所以记录了下来,方便以后随时查阅使用。
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}; //结束日选好后,重置开始日的最大日期}});