- layui
- layDate

# layDate 日期与时间组件

一款被广泛使用的高级 Web 日历组件，完全开源无偿且颜值与功能兼备，足以应对日期相关的各种业务场景

- 主页
- 更新日志
- 文档
- Github
- Gitee
- NPM

下载 layDate 下载量：…

> 下载 layDate 后，将文件夹 laydate 整个放置在您的项目任意目录，使用时只需引入 laydate.js 即可。以下是一个入门示例：

- 小试牛刀
- 查看代码

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>使用 layDate 独立版</title>
    </head>
    <body>
    <input type="text" id="demoTest">
    <script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
    //执行一个laydate实例
    laydate.render({
      elem: '#demoTest' //指定元素
    });
    </script>
    </body>
    </html>

> - 注意：如果你的页面已经使用了 layui，那么你直接采用 layui 内置的 laydate 模块即可，无需再重复引用独立版的 laydate.js
> - layDate 采用原生 JavaScript 编写，不依赖任何第三方库，兼容所有浏览器（IE6/7除外）
> - npm 安装：npm install layui-laydate

再试牛刀

- 常规用法
- 查看代码

中文版
国际版

    //常规用法
    laydate.render({
      elem: '#test1'
    });

    //国际版
    laydate.render({
      elem: '#test1-1'
      ,lang: 'en'
    });

- 其它选择器
- 查看代码

年选择器
年月选择器
时间选择器
日期时间选择器

    //年选择器
    laydate.render({
      elem: '#test2'
      ,type: 'year'
    });

    //年月选择器
    laydate.render({
      elem: '#test3'
      ,type: 'month'
    });

    //时间选择器
    laydate.render({
      elem: '#test4'
      ,type: 'time'
    });

    //时间选择器
    laydate.render({
      elem: '#test5'
      ,type: 'datetime'
    });

- 范围选择
- 查看代码

日期范围
-
年范围
年月范围
时间范围
日期时间范围

    //日期范围
    laydate.render({
      elem: '#test6'
      //设置开始日期、日期日期的 input 选择器
      //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可
      ,range: ['#test-startDate-1', '#test-endDate-1']
    });

    //年范围
    laydate.render({
      elem: '#test7'
      ,type: 'year'
      ,range: true
    });

    //年月范围
    laydate.render({
      elem: '#test8'
      ,type: 'month'
      ,range: true
    });

    //时间范围
    laydate.render({
      elem: '#test9'
      ,type: 'time'
      ,range: true
    });

    //日期时间范围
    laydate.render({
      elem: '#test10'
      ,type: 'datetime'
      ,range: true
    });

- 自定义格式
- 查看代码

请选择日期
请选择日期
请选择月份
请选择时间
请选择范围
请选择范围

    //自定义格式
    laydate.render({
      elem: '#test11'
      ,format: 'yyyy年MM月dd日'
    });
    laydate.render({
      elem: '#test12'
      ,format: 'dd/MM/yyyy'
    });
    laydate.render({
      elem: '#test13'
      ,format: 'yyyyMM'
    });
    laydate.render({
      elem: '#test14'
      ,type: 'time'
      ,format: 'H点M分'
    });
    laydate.render({
      elem: '#test15'
      ,type: 'month'
      ,range: '→'
      ,format: 'yyyy-MM'
    });
    laydate.render({
      elem: '#test16'
      ,type: 'datetime'
      ,range: '到'
      ,format: 'yyyy年M月d日H时m分s秒'
    });

- 公历节日和自定义重要日子
- 查看代码

开启公历节日
自定义重要日

    //开启公历节日
    laydate.render({
      elem: '#test17'
      ,calendar: true
    });

    //自定义重要日
    laydate.render({
      elem: '#test18'
      ,mark: {
        '0-10-14': '生日'
        ,'0-12-31': '跨年' //每年的日期
        ,'0-0-10': '工资' //每月某天
        ,'0-0-15': '月中'
        ,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
        ,'2099-10-14': '呵呵'
      }
      ,done: function(value, date){
        if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
          alert('这一天是：中国人民抗日战争胜利72周年');
        }
      }
    });

- 控制可选的日期与时间
- 查看代码

限定可选日期
前后若干天可选
限定可选时间
以9:30-17:30为例

    //限定可选日期
    var ins22 = laydate.render({
      elem: '#test-limit1'
      ,min: '2016-10-14'
      ,max: '2080-10-14'
      ,ready: function(){
        ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
      }
    });

    //前后若干天可选，这里以7天为例
    laydate.render({
      elem: '#test-limit2'
      ,min: -7
      ,max: 7
    });

    //限定可选时间
    laydate.render({
      elem: '#test-limit3'
      ,type: 'time'
      ,min: '09:30:00'
      ,max: '17:30:00'
      ,btns: ['clear', 'confirm']
    });

- 同时绑定多个
- 查看代码

    //同时绑定多个
    lay('.test-item').each(function(){
      laydate.render({
        elem: this
        ,trigger: 'click'
      });
    });

- 其它功能示例
- 查看代码

初始赋值
选中后的回调
日期切换的回调
不出现底部栏
只出现确定按钮
自定义事件
点我触发
双击我触发
日期只读
非input元素

    //初始赋值
    laydate.render({
      elem: '#test19'
      ,value: '1989-10-14'
    });

    //选中后的回调
    laydate.render({
      elem: '#test20'
      ,done: function(value, date){
        alert('你选择的日期是：' + value + '\n获得的对象是' + JSON.stringify(date));
      }
    });

    //日期切换的回调
    laydate.render({
      elem: '#test21'
      ,change: function(value, date){
        alert('你选择的日期是：' + value + '\n\n获得的对象是' + JSON.stringify(date));
      }
    });

    //不出现底部栏
    laydate.render({
      elem: '#test22'
      ,showBottom: false
    });

    //只出现确定按钮
    laydate.render({
      elem: '#test23'
      ,btns: ['confirm']
    });

    //自定义事件
    laydate.render({
      elem: '#test24'
      ,trigger: 'mousedown'
    });

    //点我触发
    laydate.render({
      elem: '#test25'
      ,eventElem: '#test25-1'
      ,trigger: 'click'
    });

    //双击我触发
    lay('#test26-1').on('dblclick', function(){
      laydate.render({
        elem: '#test26'
        ,show: true
        ,closeStop: '#test26-1'
      });
    });

    //日期只读
    laydate.render({
      elem: '#test27'
      ,trigger: 'click'
    });

    //非input元素
    laydate.render({
      elem: '#test28'
    });

- 其它主题
- 查看代码

墨绿主题
自定义颜色主题
格子主题

    //墨绿主题
    laydate.render({
      elem: '#test29'
      ,theme: 'molv'
    });

    //自定义颜色
    laydate.render({
      elem: '#test30'
      ,theme: '#393D49'
    });

    //格子主题
    laydate.render({
      elem: '#test31'
      ,theme: 'grid'
    });

- 直接嵌套显示
- 查看代码

    //直接嵌套显示
    laydate.render({
      elem: '#test-n1'
      ,position: 'static'
    });
    laydate.render({
      elem: '#test-n2'
      ,position: 'static'
      ,lang: 'en'
    });
    laydate.render({
      elem: '#test-n3'
      ,type: 'month'
      ,position: 'static'
    });
    laydate.render({
      elem: '#test-n4'
      ,type: 'time'
      ,position: 'static'
    });

倘若 layDate 于你有益，欢迎：

小额赞赏

© 「本站仅为 layui 文档保留的镜像站点，与官方无关」 MIT license