layDate - JS日期与时间组件/日历插件

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

小试牛刀
查看代码

</>code
<!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

再试牛刀

常规用法
查看代码

中文版

国际版

</>code
//常规用法
laydate.render({
  elem: '#test1'
});
//国际版
laydate.render({
  elem: '#test1-1'
  ,lang: 'en'
});

其它选择器
查看代码

年选择器

年月选择器

时间选择器

日期时间选择器

</>code
//年选择器
laydate.render({
  elem: '#test2'
  ,type: 'year'
});
//年月选择器
laydate.render({
  elem: '#test3'
  ,type: 'month'
});
//时间选择器
laydate.render({
  elem: '#test4'
  ,type: 'time'
});
//时间选择器
laydate.render({
  elem: '#test5'
  ,type: 'datetime'
});

范围选择
查看代码

日期范围

年范围

年月范围

时间范围

日期时间范围

</>code
//日期范围
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
});

自定义格式
查看代码

请选择日期

请选择月份

请选择时间

请选择范围

</>code
//自定义格式
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秒'
});

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

开启公历节日

自定义重要日

</>code
//开启公历节日
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为例

</>code
//限定可选日期
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']
});

同时绑定多个
查看代码

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

其它功能示例
查看代码

初始赋值

选中后的回调

日期切换的回调

不出现底部栏

只出现确定按钮

自定义事件

点我触发

双击我触发

日期只读

非input元素

</>code
//初始赋值
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'
});

其它主题
查看代码

墨绿主题

自定义颜色主题

格子主题

</>code
//墨绿主题
laydate.render({
  elem: '#test29'
  ,theme: 'molv'
});
//自定义颜色
laydate.render({
  elem: '#test30'
  ,theme: '#393D49'
});
//格子主题
laydate.render({
  elem: '#test31'
  ,theme: 'grid'
});

直接嵌套显示
查看代码

2021 年8 月

日	一	二	三	四	五	六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	1	2	3	4
5	6	7	8	9	10	11

Aug2021

2021年8 月

日	一	二	三	四	五	六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	1	2	3	4
5	6	7	8	9	10	11

一月
二月
三月
四月
五月
六月
七月
八月
九月
十月
十一月
十二月

2021 年8 月选择时间

日	一	二	三	四	五	六
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	1	2	3	4
5	6	7	8	9	10	11

时
1. 00
2. 01
3. 02
4. 03
5. 04
6. 05
7. 06
8. 07
9. 08
10. 09
11. 10
12. 11
13. 12
14. 13
15. 14
16. 15
17. 16
18. 17
19. 18
20. 19
21. 20
22. 21
23. 22
24. 23
分
1. 00
2. 01
3. 02
4. 03
5. 04
6. 05
7. 06
8. 07
9. 08
10. 09
11. 10
12. 11
13. 12
14. 13
15. 14
16. 15
17. 16
18. 17
19. 18
20. 19
21. 20
22. 21
23. 22
24. 23
25. 24
26. 25
27. 26
28. 27
29. 28
30. 29
31. 30
32. 31
33. 32
34. 33
35. 34
36. 35
37. 36
38. 37
39. 38
40. 39
41. 40
42. 41
43. 42
44. 43
45. 44
46. 45
47. 46
48. 47
49. 48
50. 49
51. 50
52. 51
53. 52
54. 53
55. 54
56. 55
57. 56
58. 57
59. 58
60. 59
秒
1. 00
2. 01
3. 02
4. 03
5. 04
6. 05
7. 06
8. 07
9. 08
10. 09
11. 10
12. 11
13. 12
14. 13
15. 14
16. 15
17. 16
18. 17
19. 18
20. 19
21. 20
22. 21
23. 22
24. 23
25. 24
26. 25
27. 26
28. 27
29. 28
30. 29
31. 30
32. 31
33. 32
34. 33
35. 34
36. 35
37. 36
38. 37
39. 38
40. 39
41. 40
42. 41
43. 42
44. 43
45. 44
46. 45
47. 46
48. 47
49. 48
50. 49
51. 50
52. 51
53. 52
54. 53
55. 54
56. 55
57. 56
58. 57
59. 58
60. 59

</>code
//直接嵌套显示
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 于你有益，欢迎：

小额赞赏

layDate 日期与时间组件

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code

</>code