31-layDate

<!-- 
       1、 https://www.layui.com/laydate/
       2、需要引入js文件
 -->
 <script src="laydate/laydate.js"></script>

laydate结构

<div class="container">
    <div class="row mt-5">
        <div class="col">
            <div class="form-group form-inline">
                <label for="date">日期：</label>
                <input type="text" class="form-control w-50" placeholder="请选择日期" id="date">
            </div>
        </div>
    </div>
</div>

1、laydate初始化

<!-- 适用于4.x版本 -->
<script src="laydate/laydate.js"></script>
<script>
    var layDemo=laydate.render({    //初始化方法
        //绑定元素
        elem: '#date',
        });
</script>

2、配置参数

<script>
    var layDemo=laydate.render({    //初始化方法
        //绑定元素
        elem: '#date',
        //控件选择类型
        type: 'year',
        type: 'month',
        type: 'date',
        type: 'time',
        type: 'datetime',       //年月日时分秒
        //开启左右面板范围选择，会提供高亮范围，开启是true，当给的是字符串的时候，-会相应代替
        //range:'*',
        //自定义格式
        format: 'yyyy-MM-dd HH:mm:ss',
        format: 'yyyy年MM月dd日 HH时mm分ss秒',
        format: 'yyyyMMdd',
        format: 'dd/MM/yyyy',
        format: 'yyyy年M月',
        format: 'M月d日',
        format: '北京时间：HH点mm分',
        format: 'yyyy年的M月某天晚上，大概H点',
        format: '亲，还记得yyyy年的M月d号那一天么？',
        format: 'yyyy-MM-dd',
        //初始值
        /* value:new Date(2008,7,8),        //月份从0开始
        isInitValue :false, //无作用 */
        //最小/大范围内的日期时间值
        /* min: '2019-1-1',
        max: '2019-12-31',
        min: '2019-12-11 12:30:00',
        max: '2019-12-18 12:30:00',
        min: -7,    //左选七天，
        max: 7,     //右选七天
        min: '09:30:00',
        max: '17:30:00', */
        //自定义弹出控件的事件
        trigger :'focus',   //如果input改成了div，那么trigger解决div没有焦点的问题。绑定是非输入框时默认click
        //默认显示
        show:false,
        //定位方式
        position:'abolute', //static：由父级决定
        //层叠顺序
        zIndex:66666666,
        //是否显示底部栏（截图）
        showBottom :true,
        //工具按钮（截图）
        btns :['now', 'clear',  'confirm'],
        //语言
        lang:'cn',
        //主题（颜色和样式）
        theme :'default',
        theme :'molv',
        theme :'#f00',
        theme :'grid',
        theme :'kaivon',    //给自己定义的空间，可以自己起名字
        // 是否显示公历节日
        calendar:true,
        //标注重要日子
        mark :{     //0代表每一年
            '0-5-3':'生日',
            '0-9-1':'开学',
            '0-0-10':'工资',
            '2019-12-6':'入职',
        }
    });
</script>

3、方法

<script>
    var layDemo=laydate.render({    //初始化方法
        //方法
        //控件初始打开的回调
        ready:function(date){
            console.log(date);
        },
        //日期时间被切换后的回调
        change:function(value,date,endDate){
            console.log(value);
            //date和endDate需要结合range来看
            console.log(date);  
            console.log(endDate);
            layDemo.hint(value);//空间中间弹出的窗口
        },
        //控件选择完毕后的回调
        done:function(value,date,endDate){
            console.log(value);
            console.log(date);
            console.log(endDate);
        },
    });
    console.log(layDemo);
    var endDay=laydate.getEndDate();    //getEndDate：获取到这个月的最后一天的数据
    var endDay=laydate.getEndDate(2,2035);
    console.log(endDay);
</script>