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

下载 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 日期与时间组件