关于使用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




猜你喜欢

转载自blog.csdn.net/weixin_42102798/article/details/80632648
今日推荐