日期选择器_笔记-layui事件日期选择器

时间日期选择器

<div class="content" type="type - 控件选择类型">
    <!--
    year    年选择器    只提供年列表选择
    month   年月选择器   只提供年、月选择
    date    日期选择器   可选择：年、月、日。type默认值，一般可不填
    time    时间选择器   只提供时、分、秒选择
    datetime    日期时间选择器 可选择：年、月、日、时、分、秒
    -->
    年选择器 <input id="date1" type="text"> <br>
    年月选择器 <input id="date2" type="text"> <br>
    年月日选择器 <input id="date3" type="text"> <br>
    时间选择器 <input id="date4" type="text"> <br>
    日期时间选择器 <input id="date5" type="text"> <br>
</div>

<script>
        layui.use(["laydate","jQuery","layer"],function(){
        var laydate =layui.laydate;
        var $ = layui.jquery;
        var layer =layui.layer;
           // 日期时间选择器
        laydate.render({
            elem: '#date5',
            type: "datetime"
        });
        // 时间选择器
        laydate.render({
            elem: '#date4',
            type: "time"
        });
        // 年月日选择器
        laydate.render({
            elem: '#date3'
            // type: "date" // 默认值，可以省略
        });
        // 年月选择器
        laydate.render({
            elem: '#date2',
            type: "month"
        });
        // 年选择器
        laydate.render({
            elem: '#date1', // 用于绑定执行日期渲染的元素
            type: "year"
        });
    })
</script>

<div class="content" type="range - 开启左右面板范围选择">
    年月日范围选择 <input id="date6" type="text">
</div>
<div class="content" type="format - 自定义格式">
    年月日选择器 <input id="date7" type="text"> <br>
    年月日时分秒选择器 <input id="date8" style="width: 250px" type="text">
</div>
<div class="content" type="min/max - 最小/大范围内的日期时间值">
    日期有效范围只限定在：2017年 <input id="date10" type="text"> <br>
    日期有效范围限定在：过去一周到未来一周 <input id="date11" type="text"> <br>
    时间有效范围设定在: 上午九点半到下午五点半 <input id="date12" type="text"> <br>
    日期时间有效范围的设定:  <input id="date13" type="text"> <br>
</div>
<script>
        layui.use(["jquery","layer","laydate"],function(){
        var $ =layui.jquery;
        var layer =layui.layer;
        var laydate =layui.laydate;

        laydate.render({
            elem:"#date6";
            range:true;//开启返回选择
        })
        /**
         * value 初始值
         *    可以设置字符串，但是字符串必须遵循format参数设定的格式
         *    还可以设置日期对象，例如：new Date()
         */
        laydate.render({
            elem: "#date9",
            format: "yyyy年MM月dd日",
            // value: '2018年08月18日' // 必须遵循format参数设定的格式
            value: new Date()
        });
        // 自定义格式
        laydate.render({
            elem: "#date8",
            type: "datetime",
            format: "yyyy年MM月dd日 HH时mm分ss秒"
        });
        laydate.render({
            elem:"#date7";
            format:"yyyy年MM月dd日"
        });
        /**
         最小/大范围内的日期时间值
            如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。
            如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
        */
        // 日期时间有效范围的设定
        laydate.render({
            elem: "#date13",
            type: "datetime",
            min: "2019-04-01 09:30:00",
            max: "2019-04-30 18:30:00"
        });
        // 时间有效范围设定在: 上午九点半到下午五点半 :
        laydate.render({
            elem: "#date12",
            type: "time",
            min: "09:30:00",
            max: "18:30:00"
        });
        // 日期有效范围限定在：过去一周到未来一周
        laydate.render({
            elem: "#date11",
            min: -7,
            max: 7
        });

        // 日期有效范围只限定在：2017年
        laydate.render({
            elem: "#date10",
            min: "2017-01-01",
            max: "2017-12-31"
        });
    })  
/**
         * mark - 标注重要日子
         *   每年的日期  {'0-9-18': '国耻'}    0 即代表每一年
             每月的日期  {'0-0-15': '中旬'}    0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
             特定的日期  {'2017-8-21': '发布')
         */
        laydate.render({
            elem: "#date20",
            type: "date",
            mark: {
                '0-10-14': '生日'
                ,'0-0-10': '工资'
                ,'2017-8-21': '结婚'
            }
            // 点击某一个日期，响应的回调函数
            ,done: function(value, date){
                console.log(date);
                if(date.year === 2017 && date.month === 8 && date.date === 21){
                    layer.msg('结婚纪恋日快乐，记得买花');
                }
            }
        });

        // calendar - 是否显示公历节日
        // 我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。
        laydate.render({
            elem: "#date19",
            type: "date",
            calendar: true
        });

        // theme - 主题
        // default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
        laydate.render({
            elem: "#date18",
            type: "date",
            theme: "#3c3c3c"
        });

        /**
         * lang - 语言
         * lang="en"国际版， lang="cn"中文版（默认）
         */
        laydate.render({
            elem: "#date17",
            type: "date",
            lang: "en"
        });

        /**
         * btns - 工具按钮
         * 'clear'： 对应“清空”按钮
         * 'now'：对应“现在”按钮
         * 'confirm'：对应“确定”按钮
         */
        laydate.render({
            elem: "#date16",
            type: "date",
            btns: ["confirm", "now"]
        });
         // showBottom - 是否显示底部栏
        laydate.render({
            elem: "#date15",
            type: "date",
            showBottom: false
        });
        // 自定义弹出控件的事件
        laydate.render({
            elem: "#date14",
            type: "date",
            trigger: "mouseenter"
        });
 </script>