這里只是使用layui的日期模塊,所以,我只引入了laydate相關文件;
1.首選引入laydate.js和laydata.css:
<link href="css/laydate.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/laydate.js"></script>
2.html部分(input樣式我自己定義的)
<input class="date_class" type="text" id="startTime" /> <input class="date_class" type="text" id="endTime" />
3.js部分:
<script type="text/javascript"> var startDate = laydate.render({ elem: '#startTime', //指定元素 type: 'date', max: getNowFormatDate(), done: function(value, dates) { endDate.config.min = { year: dates.year, month: dates.month - 1, //關鍵 date: dates.date, hours: 0, minutes: 0, seconds: 0 }; // 開始日期 console.log(value); } }); var endDate = laydate.render({ elem: '#endTime', //指定元素 type: 'date', max: getNowFormatDate(), done: function(value, dates) { // 結束日期 console.log(value); } }); // 獲取當前的日期時間 格式“yyyy-MM-dd HH:MM:SS” function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds(); return currentdate; } </script>
效果圖:
以上;