小編給大家分享一下如何設置TP5.1+layui時間范圍,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

成都創新互聯專業為企業提供改則網站建設、改則做網站、改則網站設計、改則網站制作等企業網站建設、網頁設計與制作、改則企業網站模板建站服務,10多年改則做網站經驗,不只是建網站,更提供有價值的思路和整體網絡服務。
在制作一個項目時遇到一個問題,就是開始時間和結束時間是相關聯的,結束時間的選擇范圍是最小為開始時間,最大為開始時間90天后的時間,我這邊用的是layui的插件獲取的日期,里面有兩個參數min和max分別可以設置日期范圍;
其代碼如下所示:
layui.use('laydate', function(){
var laydate = layui.laydate;
//限定可選日期
var ins22 = laydate.render({
elem: '#test-limit1'
,min: '2016-10-14'
,max: '2080-10-14'
});
});但是怎么獲取max和min的值時,我遇到了難點,后面經過反復研究Layui官方文檔和反復的嘗試,終于解決了這一問題,分享給大家:
a.定義變量當前時間、最小時間、最大時間
var now = new Date(); var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1); var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);
b.根據當前選擇的時間重新給max和min賦值
要獲取max和min的值,首先要了解時間換算單位,大概思路為基本換算單位以小時為準,1小時為3600秒,因為laui中的時間戳是以毫秒為計算單位,所以需要再3600的基礎上再乘以1000,一天為24小時,總共90天所以是90*24*3600*1000.
在選擇了開始時間后done: function (value, date) 中value的值為當前選擇的時間,將該值轉化為時間戳為:var date1 = new Date(value).getTime();
90天后的時間戳為:var date2 = date1 + 90 * 24 * 3600 * 1000;
再將獲取的時間轉化為年月日:
var date5 = {
'date': date3.getDate(),
'month': date3.getMonth() + 1,
'year': date3.getFullYear()
};將獲取到的值賦值給結束時間的最小值和最大值:
end.config.max = date5; end.config.max.month = date5.month - 1; end.config.min = date; end.config.min.month = date.month - 1;
所以完整的代碼為:
var start = laydate.render({
elem: '#bx_start',
type: 'date',
max: max,
min: min,
showBottom: false,
btns: ['clear', 'confirm'],
done: function (value, date) {
var date1 = new Date(value).getTime();//將當前選擇的時間轉化為時間戳
var date2 = date1 + 90 * 24 * 3600 * 1000;//獲取90天后的時間
var date3 = new Date(date2);
var date5 = {
'date': date3.getDate(),
'month': date3.getMonth() + 1,
'year': date3.getFullYear()
};
end.config.max = date5;
end.config.max.month = date5.month - 1;
end.config.min = date;
end.config.min.month = date.month - 1;
}
});c.將獲取的min和max傳給結束時間
var end = laydate.render({
elem: '#bx_end',
type: 'date',
max: max,
min: min,
showBottom: false,
done: function (value, date) {
if ($.trim(value) == '') {
var curDate = new Date();
date = {
'date': curDate.getDate(),
'month': curDate.getMonth() + 1,
'year': curDate.getFullYear()
};
}
start.config.max = date;
start.config.max.month = date.month - 1;
}
});以下為完整代碼
<script>
layui.use(['form','layedit', 'laydate','layer','element'], function() {
$ = layui.jquery;
layer = layui.layer;
var form = layui.form;
layedit = layui.layedit;
laydate = layui.laydate;
//定義變量當前時間、最小時間、最大時間
var now = new Date();
var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);
var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);
var start = laydate.render({
elem: '#bx_start',
type: 'date',
max: max,
min: min,
showBottom: false,
btns: ['clear', 'confirm'],
done: function (value, date) {
var date1 = new Date(value).getTime();//將當前選擇的時間轉化為時間戳
var date2 = date1 + 90 * 24 * 3600 * 1000;//獲取90天后的
var date3 = new Date(date2);
var date5 = {
'date': date3.getDate(),
'month': date3.getMonth() + 1,
'year': date3.getFullYear()
};
end.config.max = date5;
end.config.max.month = date5.month - 1;
end.config.min = date;
end.config.min.month = date.month - 1;
}
});
var end = laydate.render({
elem: '#bx_end',
type: 'date',
max: max,
min: min,
showBottom: false,
done: function (value, date) {
if ($.trim(value) == '') {
var curDate = new Date();
date = {
'date': curDate.getDate(),
'month': curDate.getMonth() + 1,
'year': curDate.getFullYear()
};
}
start.config.max = date;
start.config.max.month = date.month - 1;
}
});
});
</script>以上是“如何設置TP5.1+layui時間范圍”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯行業資訊頻道!
網頁題目:如何設置TP5.1+layui時間范圍
URL網址:http://www.js-pz168.com/article18/gppogp.html
成都網站建設公司_創新互聯,為您提供動態網站、標簽優化、營銷型網站建設、全網營銷推廣、虛擬主機、品牌網站設計
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯