1. 程式人生 > >關於使用layui日期元件和自帶的日期用法

關於使用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