首頁  >  文章  >  php框架  >  TP5.1 + layui時間範圍設定方法

TP5.1 + layui時間範圍設定方法

XuPing.Yang
XuPing.Yang原創
2021-08-09 14:18:491574瀏覽

最近在製作一個專案時遇到一個問題,就是開始時間和結束時間是相關聯的,結束時間的選擇範圍是最小為開始時間,最大為開始時間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賦值

要取得maxmin的值,首先要了解時間換算單位,大概思路為基本換算單位以小時為準,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([&#39;form&#39;,&#39;layedit&#39;, &#39;laydate&#39;,&#39;layer&#39;,&#39;element&#39;], function() {
       $ = layui.jquery;
       layer = layui.layer;
       var form = layui.form;
       layedit = layui.layedit;
       laydate = layui.laydate;
//定义变量当前时间、最小时间、最大时间
       var now = new Date();
       var min = now.getFullYear() + &quot;-&quot; + (now.getMonth() + 1) + &quot;-&quot; + (now.getDate() + 1);
       var max = now.getFullYear() + &quot;-&quot; + (now.getMonth() + 2) + &quot;-&quot; + (now.getDate() + 2);
       var start = laydate.render({
           elem: &#39;#bx_start&#39;,
           type: &#39;date&#39;,
           max: max,
           min: min,
           showBottom: false,
           btns: [&#39;clear&#39;, &#39;confirm&#39;],
           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 = {
                   &amp;#39;date&amp;#39;: date3.getDate(),
                   &amp;#39;month&amp;#39;: date3.getMonth() + 1,
                   &amp;#39;year&amp;#39;: 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: &amp;#39;#bx_end&amp;#39;,
           type: &amp;#39;date&amp;#39;,
           max: max,
           min: min,
           showBottom: false,
           done: function (value, date) {
               if ($.trim(value) == &amp;#39;&amp;#39;) {
                   var curDate = new Date();
                   date = {
                       &amp;#39;date&amp;#39;: curDate.getDate(),
                       &amp;#39;month&amp;#39;: curDate.getMonth() + 1,
                       &amp;#39;year&amp;#39;: curDate.getFullYear()
                   };
               }
               start.config.max = date;
               start.config.max.month = date.month - 1;
           }
       });
   });
</script>

相關文章推薦:《TP5.1 為圖片新增浮水印功能》《TP5.1 layui實作欄位數的呼叫》《最新的10個thinkphp影片教學

#

以上是TP5.1 + layui時間範圍設定方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn