layDate 日期与时间组件

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

下载 layDate-v5.3.1 下载量：231993
下载 layDate 后，将文件夹 laydate 整个放置在您的项目任意目录，使用时只需引入 laydate.js 即可。以下是一个入门示例： 
</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>使用 layDate 独立版</title>
  6. </head>
  7. <body>
  8. <input type="text" id="demoTest">
  9. <script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->
  10. <script>
  11. //执行一个laydate实例
  12. laydate.render({
  13.   elem: '#demoTest' //指定元素
  14. });
  15. </script>
  16. </body>
  17. </html>
  18.
再试牛刀 
</>code
  1. //常规用法
  2. laydate.render({
  3.   elem: '#test1'
  4. });
  5. //国际版
  6. laydate.render({
  7.   elem: '#test1-1'
  8.   ,lang: 'en'
  9. }); 
  10.         
</>code
  1. //年选择器
  2. laydate.render({
  3.   elem: '#test2'
  4.   ,type: 'year'
  5. });
  6. //年月选择器
  7. laydate.render({
  8.   elem: '#test3'
  9.   ,type: 'month'
  10. });
  11. //时间选择器
  12. laydate.render({
  13.   elem: '#test4'
  14.   ,type: 'time'
  15. });
  16. //时间选择器
  17. laydate.render({
  18.   elem: '#test5'
  19.   ,type: 'datetime'
  20. });
  21.
-
</>code
  1. //日期范围
  2. laydate.render({
  3.   elem: '#test6'
  4.   //设置开始日期、日期日期的 input 选择器
  5.   //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可
  6.   ,range: ['#test-startDate-1', '#test-endDate-1']
  7. });
  8. //年范围
  9. laydate.render({
  10.   elem: '#test7'
  11.   ,type: 'year'
  12.   ,range: true
  13. });
  14. //年月范围
  15. laydate.render({
  16.   elem: '#test8'
  17.   ,type: 'month'
  18.   ,range: true
  19. });
  20. //时间范围
  21. laydate.render({
  22.   elem: '#test9'
  23.   ,type: 'time'
  24.   ,range: true
  25. });
  26. //日期时间范围
  27. laydate.render({
  28.   elem: '#test10'
  29.   ,type: 'datetime'
  30.   ,range: true
  31. }); 
  32.         
</>code
  1. //自定义格式
  2. laydate.render({
  3.   elem: '#test11'
  4.   ,format: 'yyyy年MM月dd日'
  5. });
  6. laydate.render({
  7.   elem: '#test12'
  8.   ,format: 'dd/MM/yyyy'
  9. });
  10. laydate.render({
  11.   elem: '#test13'
  12.   ,format: 'yyyyMM'
  13. });
  14. laydate.render({
  15.   elem: '#test14'
  16.   ,type: 'time'
  17.   ,format: 'H点M分'
  18. });
  19. laydate.render({
  20.   elem: '#test15'
  21.   ,type: 'month'
  22.   ,range: '→'
  23.   ,format: 'yyyy-MM'
  24. });
  25. laydate.render({
  26.   elem: '#test16'
  27.   ,type: 'datetime'
  28.   ,range: '到'
  29.   ,format: 'yyyy年M月d日H时m分s秒'
  30. }); 
  31.         
</>code
  1. //开启公历节日
  2. laydate.render({
  3.   elem: '#test17'
  4.   ,calendar: true
  5. });
  6. //自定义重要日
  7. laydate.render({
  8.   elem: '#test18'
  9.   ,mark: {
  10.     '0-10-14': '生日'
  11.     ,'0-12-31': '跨年' //每年的日期
  12.     ,'0-0-10': '工资' //每月某天
  13.     ,'0-0-15': '月中'
  14.     ,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
  15.     ,'2099-10-14': '呵呵'
  16.   }
  17.   ,done: function(value, date){
  18.     if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
  19.       alert('这一天是：中国人民抗日战争胜利72周年');
  20.     }
  21.   }
  22. }); 
  23.
以9:30-17:30为例 
</>code
  1. //限定可选日期
  2. var ins22 = laydate.render({
  3.   elem: '#test-limit1'
  4.   ,min: '2016-10-14'
  5.   ,max: '2080-10-14'
  6.   ,ready: function(){
  7.     ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
  8.   }
  9. });
  10. //前后若干天可选，这里以7天为例
  11. laydate.render({
  12.   elem: '#test-limit2'
  13.   ,min: -7
  14.   ,max: 7
  15. });
  16. //限定可选时间
  17. laydate.render({
  18.   elem: '#test-limit3'
  19.   ,type: 'time'
  20.   ,min: '09:30:00'
  21.   ,max: '17:30:00'
  22.   ,btns: ['clear', 'confirm']
  23. }); 
  24.         
</>code
  1. //同时绑定多个
  2. lay('.test-item').each(function(){
  3.   laydate.render({
  4.     elem: this
  5.     ,trigger: 'click'
  6.   });
  7. }); 
  8.         
</>code
  1. //初始赋值
  2. laydate.render({
  3.   elem: '#test19'
  4.   ,value: '1989-10-14'
  5. });
  6. //选中后的回调
  7. laydate.render({
  8.   elem: '#test20'
  9.   ,done: function(value, date){
  10.     alert('你选择的日期是：' + value + '\n获得的对象是' + JSON.stringify(date));
  11.   }
  12. });
  13. //日期切换的回调
  14. laydate.render({
  15.   elem: '#test21'
  16.   ,change: function(value, date){
  17.     alert('你选择的日期是：' + value + '\n\n获得的对象是' + JSON.stringify(date));
  18.   }
  19. });
  20. //不出现底部栏
  21. laydate.render({
  22.   elem: '#test22'
  23.   ,showBottom: false
  24. });
  25. //只出现确定按钮
  26. laydate.render({
  27.   elem: '#test23'
  28.   ,btns: ['confirm']
  29. });
  30. //自定义事件
  31. laydate.render({
  32.   elem: '#test24'
  33.   ,trigger: 'mousedown'
  34. });
  35. //点我触发
  36. laydate.render({
  37.   elem: '#test25'
  38.   ,eventElem: '#test25-1'
  39.   ,trigger: 'click'
  40. });
  41. //双击我触发
  42. lay('#test26-1').on('dblclick', function(){
  43.   laydate.render({
  44.     elem: '#test26'
  45.     ,show: true
  46.     ,closeStop: '#test26-1'
  47.   });
  48. });
  49. //日期只读
  50. laydate.render({
  51.   elem: '#test27'
  52.   ,trigger: 'click'
  53. });
  54. //非input元素
  55. laydate.render({
  56.   elem: '#test28'
  57. }); 
  58.         
</>code
  1. //墨绿主题
  2. laydate.render({
  3.   elem: '#test29'
  4.   ,theme: 'molv'
  5. });
  6. //自定义颜色
  7. laydate.render({
  8.   elem: '#test30'
  9.   ,theme: '#393D49'
  10. });
  11. //格子主题
  12. laydate.render({
  13.   elem: '#test31'
  14.   ,theme: 'grid'
  15. });
  16.         
</>code
  1. //直接嵌套显示
  2. laydate.render({
  3.   elem: '#test-n1'
  4.   ,position: 'static'
  5. });
  6. laydate.render({
  7.   elem: '#test-n2'
  8.   ,position: 'static'
  9.   ,lang: 'en'
  10. });
  11. laydate.render({
  12.   elem: '#test-n3'
  13.   ,type: 'month'
  14.   ,position: 'static'
  15. });
  16. laydate.render({
  17.   elem: '#test-n4'
  18.   ,type: 'time'
  19.   ,position: 'static'
  20. }); 
  21.

倘若 layDate 于你有益，欢迎：

小额赞赏

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