需求描述:开始时间要大于当前时间,结束时间要大于开始时间。
网上相关插件有很多。在此我选用了laydate,官网:/laydate/
官网的文档,并不能完全满足需求;
通过google查资料和自己的摸索,实现功能,现记录如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>开始时间和结束时间</title></head><body>日期时间:<input type="text" id="startTime" placeholder='开始时间'><input type="text" id="endTime" placeholder='结束时间'><script src="./laydate/laydate.js"></script> <!-- 改成你的路径 --><script>function changeDate(){var date = new Date();var y = date.getFullYear();var m = date.getMonth()+1;m = m<10 ? ('0'+ m) :m;var d = date.getDate();d = d<10 ? ('0'+ d) :d;var h = date.getHours();h = h<10 ? ('0'+ h) :h;var i = date.getMinutes();i = i<10 ? ('0'+ i) :i;var s = date.getSeconds();s = s<10 ? ('0'+ s) :s;return y+'-'+m+'-'+d+' '+h+':'+i+':'+s;}var now = changeDate();//console.log(now);/*时间插件*/var startTime =laydate.render({elem: '#startTime',type: 'datetime',min: now,max: '2035-12-31 12:30:00',done: function(value, date, endDate) {endLayDate.config.min = {year: date.year,month: date.month - 1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: date.seconds +1};},});/*时间插件*/var endLayDate = laydate.render({elem: '#endTime',type: 'datetime',max: '2035-12-31 12:30:00',btns: ['clear', 'confirm'], //clear、now、confirmdone: function(value, date, endDate) {startTime.config.max = {year: date.year,month: date.month - 1,date: date.date,hours: date.hours,minutes: date.minutes,seconds: date.seconds -1};},});</script></body></html>
如果觉得《input表单开始时间和结束时间的选取 laydate》对你有帮助,请点赞、收藏,并留下你的观点哦!