jQuery日历控件 日期控件 日期选择器 日历选择器 有大用

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

参数解释：

istime ： 判断是否时间，如果true则判断时间合法性，乱输入的将提示然后清空

format ：日期格式，hh:mm:ss则表示需要具体时间，另外，需要先选择时间，再选择日期，因为点击日期后将被认为是选择完毕。

festival ：true  是否显示节日。注意：只显示国际节日

istoday : false  是否显示今天的按钮，默认为显示

min ：'2015-01-01 00:00:00'    选择最小日期

max ：'2015-02-02 12:00:00'    选择最大日期

最小日期与最大日期选择后的不足之处：

1. 如上，现在是2014年，日期段被定义为上面区间的时候，年份能自动定位到2015年，月份无法自动定位到01月

2. 如上，最大日期是12点，但是 我选择2015-02-02 06 之后分和秒无法选择了

min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推

max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推

<input onclick="laydate()">    //最简单的调用方式

<input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">    //附带条件的调用方式

<div onclick="laydate()"></div>        //您其实还可以设定任何html元素作为目标对象

外部调用JS方法：

<input type="text" id="#hello" />

laydate({

    elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'

    event: 'focus' //响应事件。如果没有传入event，则按照默认的click

});

<input type="text" id="#hello"/>    //添加class属性，则在输入框中带日期icon，并且修饰input框

图标触发日期 ：

<input id="hello1">

<span onclick="laydate({elem: '#hello1'});"></span>    //通过elem标记，将日期空间渲染到input框中

=============以下内容由 佳奇爹 提供=================

【自定义日期格式】

<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>

来自  http://www.jq22.com/jquery-info1059

简要介绍

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

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

选择理由

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

• 科学的接口设计1

• 她并不提倡API的数量性，而是尽可能呈现最人性合理的接口，减少使用成本。

• 一流的代码驱动2

• layDate完全用原生JavaScript实现，代码采用自由灵活风格，内部封装了众多轻量级的方法引擎，保证了良好的速度体验和接近于零的代码冗余.

• 人性的皮肤体系3

• 她非常注重外观设计，因此她提供了非常强大的皮肤选择支持，不仅官方会提供海量的皮肤下载，您还可以很方便地按照喜好去自定义皮肤，我们非常欢迎您能够贡献皮肤包，具体操作事宜请查看皮肤库页面。

功能演示

【外部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>