1.引入laydate.js
<script src="../js/laydate.js" th:src="@{/js/laydate.js}"></script>
2.html
<input class="form-control" type="text" id="startTime" name="startTime" placeholder="开始时间">
<input class="form-control" type="text" id="endTime" name="endTime" placeholder="结束时间">
3.js
type可修改为想要的样式,但要保持一致;
var startDate = laydate.render({
elem: '#startTime', //指定元素
type: 'datetime',
trigger: 'click',
// max: getNowDateFormat(),
done: function (value, dates) {
endDate.config.min = {
year: dates.year,
month: dates.month - 1, //关键
date: dates.date,
hours: dates.hours,
minutes: dates.minutes,
seconds: dates.seconds
};
}
});
var endDate = laydate.render({
elem: '#endTime', //指定元素
type: 'datetime',
trigger: 'click',
// max: getNowDateFormat()
});
//获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”
//如需控制时间小于当前时间,将上面的注释打开
function getNowDateFormat() {
var date = new Date();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
// 月份补0
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
// 日期补0
strDate = "0" + strDate;
}
var currentDate = date.getFullYear() + "-"
+ month + "-"
+ strDate + " "
+ date.getHours() + ":"
+ date.getMinutes() + ":"
+ date.getSeconds();
console.log(currentDate);
return currentDate;
}
其实感觉element里的样式更好看些,但公司要用laydate,附饿了么地址:
https://element.eleme.cn/#/zh-CN/component/datetime-picker