layDate日历控件

官网：http://www.layui.com/laydate/

你是时候换一款日期控件了，而layDate非常愿意和您成为工作伙伴。她致力于成为全球最用心的web日期支撑，为国内外所有从事web应用开发的同仁提供力所能及的动力。她基于原生JavaScript精心雕琢，兼容了包括IE6在内的所有主流浏览器。她具备优雅的内部代码，良好的性能体验，和完善的皮肤体系，并且完全开源，你可以任意获取开发版源代码，一扫某些传统日期控件的封闭与狭隘。layDate本着资源共享的开发者精神和对网页日历交互无穷的追求，延续了layui一贯的简单与易用。她遵循LGPL协议，您可以免费将她用于任何个人项目。

 

<input onclick="laydate()">
这是是一个最简单的调用方式，它会把自身作为目标元素。除此之外，您还可以按照需求传入一些其它key，比如：
<input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
那么对于输入框，如果用户乱填怎么办？没关系，laydate会智能纠错，你可以尝试在上述表单输入任意值，然后点击页面其它处测试一下。
当然，您其实还可以设定任何html元素作为目标对象，又比如：<div onclick="laydate()"></div>
    

　　

注意事项

1. 解压后，将laydate整个文件放至您项目的任意目录，不要移动其文件结构，它们具有完整的依赖体系。
2. 使用只需在页面引入laydate.js即可。
3. 如果您的网站的js采用合并或模块加载，您需要打开laydate.js，修改path。
4. 用于实际项目时请保留来源，勿剔除laydate.js头部注释。

layDate除了包含日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，快捷键操作等常规功能外，还拥有更多趋近完美的解决方案。 

【外部js调用】
<input id="hello" class="laydate-icon">
<script>
laydate({
  elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
  event: 'focus' //响应事件。如果没有传入event，则按照默认的click
});
</script>

【图标触发日期】
<input id="hello1">
<span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>

　　对应代码说明

开始日：<li class="laydate-icon" id="start" style="width:200px; margin-right:10px;"></li>
结束日：<li class="laydate-icon" id="end" style="width:200px;"></li>
<script>
var start = {
  elem: '#start',
  format: 'YYYY/MM/DD hh:mm:ss',
  min: laydate.now(), //设定最小日期为当前日期
  max: '2099-06-16 23:59:59', //最大日期
  istime: true,
  istoday: false,
  choose: function(datas){
     end.min = datas; //开始日选好后，重置结束日的最小日期
     end.start = datas //将结束日的初始值设定为开始日
  }
};
var end = {
  elem: '#end',
  format: 'YYYY/MM/DD hh:mm:ss',
  min: laydate.now(),
  max: '2099-06-16 23:59:59',
  istime: true,
  istoday: false,
  choose: function(datas){
    start.max = datas; //结束日选好后，重置开始日的最大日期
  }
};
laydate(start);
laydate(end);
</script>