關於使用layui日期元件和自帶的日期用法
一,日期元件
標籤部分
<input class="layui-input" placeholder="開始日" name="start" id="start">
<input class="layui-input" placeholder="截止日" name="end" id="end">
js部分
<script type="text/javascript" src="./lib/laydate/laydate.js" charset="utf-8"></script>這裡只要倒入元件模組即可,不需要另外倒入layui.js否則會報錯,找不到laydate。
<script>
var start = laydate.render({
elem: '#beginTime',
type:'datetime', //可選擇:年月日時分秒
min: '2018-1-01 00:00:00', //最小日期為當前日期的前一天
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: '2018-1-01 00:00:00', //最小日期為當前日期的前一天
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
}; //結束日選好後,重置開始日的最大日期
}
});
</script>
二,layui自帶的日期
標籤一致。
js部分
<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>此處也只要倒入該標籤,不需要另加入元件標籤。(根據你的前端的頁面的不同,可能會有少許的別的layui的js的倒入)
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
var endDate= laydate.render({
elem: '#endTime',//選擇器結束時間
type: 'datetime',
min:"1970-1-1",//設定min預設最小值
done: function(value,date){
startDate.config.max={
year:date.year,
month:date.month-1,//關鍵
date: date.date,
hours: 0,
minutes: 0,
seconds : 0
}
}
});
//日期範圍
var startDate=laydate.render({
elem: '#beginTime',
type: 'datetime',
max:"2099-12-31",//設定一個預設最大值
done: function(value, date){
endDate.config.min ={
year:date.year,
month:date.month-1, //關鍵
date: date.date,
hours: 0,
minutes: 0,
seconds : 0
};
}
});
});
</script>
注:借鑑並總結,請尊重原創。https://blog.csdn.net/adagio0531/article/details/71272776