layui 学习笔记(二) 日期选择器&图片放大

1.时间选择器

　　https://www.layui.com/laydate/

　　https://www.layui.com/v1/demo/laydate.html

　　->起始日期不能大于截止日期，截止日期不能小于起始日期

html:

<div class="layui-inline">
       <input id="startDate" class="layui-input test-item" type="text"  placeholder="起始日期"/>
</div>
<div class="layui-inline">
       <input id="endDate" class="layui-input test-item" type="text" placeholder="截止日期"/>
</div>

js:

//初始化时间
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        /*lay('.test-item').each(function(){// 如果不需要大小的验证 就这样写就行了后面就不需要了
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });*/
        var startDate = laydate.render({
            elem:'#startDate',
            type:'date',
　　　　　　　 trigger:'click',
            btns: ['clear','confirm'],
            done:function(value,date){
                if(value){
                    endDate.config.min={
                        year:date.year,
                        month:date.month-1,//关键
                        date:date.date,
                        hours:date.hours,
                        minutes:date.minutes,
                        seconds:date.seconds
                    };
                }else{
                    endDate.config.min=startDate.config.min;
                }
            }
        });
        var endDate=laydate.render({
            elem:'#endDate',
            type:'date',
　　　　　　　trigger:'click',
            btns: ['clear','confirm'],
            done:function(value,date){
                if(value){
                    startDate.config.max={
                        year:date.year,
                        month:date.month-1,//关键
                        date:date.date,
                        hours:date.hours,
                        minutes:date.minutes,
                        seconds:date.seconds
                    }
                }else{
                    startDate.config.max=endDate.config.max;
                }
            }
        })
    });

 

2. 放大图片

//放大图片
    var showNatrualPic=function(img){// img 里写 onclick="showNatrualPic(this)"
        var width=img.naturalWidth;
        var height=img.naturalHeight;
        if((width>800||height>800)&&width>height){//超宽
            height=height*800/width;
            width=800;
        }else if((width>800||height>800)&&width<height){//超长
            width=width*800/height;
            height=800;
        }else if(width>800||height>800){//正方形
            width=800;
            height=800;
        }
        parent.layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            area: [width + 'px', height + 'px'], //宽高
            content: "<img src=" + img.src + " style=\"width:"+width+"px;height:"+height+"px\" />",
            end:function(){
            }
        });
    }