独立组件

layDate - JavaScript日期控件

立即下载

大小:13KB,下载次数:

版本: (2014-6-25更新)

首页 功能演示 API手册 皮肤库

简要介绍

layim

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

那么,先尝试运行这样一个例子初步认识一下吧:
<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除了包含日期范围限制开始日期设定自定义日期格式时间戳转换当天的前后若干天返回时分秒选择智能响应自动纠错节日识别快捷键操作等常规功能外,还拥有更多趋近完美的解决方案。

科学的接口设计1
她并不提倡API的数量性,而是尽可能呈现最人性合理的接口,减少使用成本。
一流的代码驱动2
layDate完全用原生JavaScript实现,代码采用自由灵活风格,内部封装了众多轻量级的方法引擎,保证了良好的速度体验和接近于零的代码冗余.
人性的皮肤体系3
她非常注重外观设计,因此她提供了非常强大的皮肤选择支持,不仅官方会提供海量的皮肤下载,您还可以很方便地按照喜好去自定义皮肤,我们非常欢迎您能够贡献皮肤包,具体操作事宜请查看皮肤库页面。

功能演示

外部js调用:
【外部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>
        
自定义日期格式:
【自定义日期格式】
<div id="test1" class="laydate-icon"></div>
<script>
laydate({
    elem: '#test1',
    format: 'YYYY/MM', // 分隔符可以任意定义,该例子表示只显示年月
    festival: true, //显示节日
    choose: function(datas){ //选择日期完毕的回调
        alert('得到:'+datas);
    }
});
</script>

【日期范围限定在昨天到明天】
<div id="hello3" class="laydate-icon"></div>
<script>
laydate({
    elem: '#hello3',
    min: laydate.now(-1), //-1代表昨天,-2代表前天,以此类推
    max: laydate.now(+1) //+1代表明天,+2代表后天,以此类推
});
</script>
        
日期范围限制:
    开始日:
  • 结束日:
开始日:<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>