日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

最近在制作一個項目時遇到一個問題,就是開始時間和結束時間是相關聯的,結束時間的選擇范圍是最小為開始時間,最大為開始時間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(['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>



分享到:
標簽:Thinkphp5.1 layui時間范圍設置方法
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定