<span style="font-size:18px;"><!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>layDate 调用实例</title>

<script src="laydate/laydate.js"></script>

<style>

html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}

h2{line-height:30px; font-size:20px;}

a,a:hover{ text-decoration:none;}

pre{font-family:'微软雅黑'}

.box{width:970px; padding:10px 20px; background-color:#fff; margin:10px auto;}

.box a{padding-right:20px;}

</style>

</head>

<body>

<div style="width:970px; margin:10px auto;">

    演示一：<input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">

</div>

<div class="box">

<pre>

<strong>【注意事项】</strong>

一、请千万勿移动laydate中的目录结构，它们具有完整的依赖体系。使用时，只需引入laydate/laydate.js即可。

二、如果您的网站的js采用合并或模块加载，您需要打开laydate.js，修改path。

三、laydate遵循LGPL开源协议，永不收费！

四、版权最终解释权：贤心。

</pre>

演示二：<input class="laydate-icon" id="demo" value="2014-6-25更新">  

</br>

演示三：

<input class="laydate-icon" onclick="laydate()"></br>

这是是一个最简单的调用方式，它会把自身作为目标元素。除此之外，您还可以按照需求传入一些其它key，比如：</br>

演示四：

<input class="laydate-icon" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"></br>  

那么对于输入框，如果用户乱填怎么办？没关系，laydate会智能纠错，你可以尝试在上述表单输入任意值，然后点击页面其它处测试一下。</br>

当然，您其实还可以设定任何html元素作为目标对象，又比如：<div onclick="laydate()"></div></br>  

注意事项</br>

解压后，将laydate整个文件放至您项目的任意目录，不要移动其文件结构，它们具有完整的依赖体系。</br>

使用只需在页面引入laydate.js即可。</br>

如果您的网站的js采用合并或模块加载，您需要打开laydate.js，修改path。</br>

用于实际项目时请保留来源，勿剔除laydate.js头部注释。</br>

</br>  

选择理由</br>

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

</br>

科学的接口设计1</br>

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

一流的代码驱动2</br>

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

人性的皮肤体系3</br>

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

</br>

功能演示</br>

外部js调用：</br>

【外部js调用】</br>

<input id="hello" class="laydate-icon">

<script>

laydate({

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

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

});

</script>

</br>

图标触发日期：</br>  

【图标触发日期】</br>

<input id="hello1">

<span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>

</br>

自定义日期格式：</br>

【自定义日期格式】</br>

<div id="test1" class="laydate-icon"></div>

<script>

laydate({

    elem: '#test1',

    format: 'YYYY/MM', // 分隔符可以任意定义，该例子表示只显示年月

    festival: true, //显示节日

    choose: function(datas){ //选择日期完毕的回调

        alert('得到：'+datas);

    }

});

</script></br>

日期范围限定在昨天到明天：</br>

【日期范围限定在昨天到明天】</br>

<div id="hello3" class="laydate-icon"></div>

<script>

laydate({

    elem: '#hello3',

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

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

});

</script>

 </br>

日期范围限制： 开始日： 结束日：</br>  

开始日：<li class="laydate-icon" id="start" style="width:200px; margin-right:10px;"></li></br>

结束日：<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>

</div>

</div>

<script>

;!function(){  

//laydate.skin('molv');  

laydate({

   elem: '#demo'

})  

}();

</script>

    <b>API文档临时版，后面会陆续整理详细资料：</b><br/>

    一、核心方法：laydate(options);<br/>

    options是一个对象，它包含了以下key: '默认值'<br/>

        elem: '#id', //需显示日期的元素选择器<br/>

        event: 'click', //触发事件<br/>

        format: 'YYYY-MM-DD hh:mm:ss', //日期格式<br/>

        istime: false, //是否开启时间选择<br/>

        isclear: true, //是否显示清空<br/>

        istoday: true, //是否显示今天<br/>

        issure: true, 是否显示确认<br/>

        festival: true //是否显示节日<br/><br/>

        min: '1900-01-01 00:00:00', //最小日期<br/>

        max: '2099-12-31 23:59:59', //最大日期<br/>

        start: '2014-6-15 23:00:00',    //开始日期<br/>

        fixed: false, //是否固定在可视区域<br/>

        zIndex: 99999999, //css z-index<br/>

        choose: function(dates){ //选择好日期的回调<br/>  

        }<br/>  

    二、其它方法/属性<br/>  

    laydate.v   //获取laydate版本号<br/>

    laydate.skin(lib);  //加载皮肤，参数lib为皮肤名 <br/>  

    /*<br/>

        layer.now支持多类型参数。timestamp可以是前后若干天，也可以是一个时间戳。format为日期格式，为空时则采用默认的“-”分割。<br/>

        如laydate.now(-2)将返回前天，laydate.now(3999634079890)将返回2096-09-28<br/>

    */<br/>

    layer.now(timestamp, format);   //该方法提供了丰富的功能，推荐灵活使用。<br/>  

    laydate.reset();    //重设日历控件坐标，一般用于页面dom结构改变时。无参<br/>  

    皮肤使用说明<br/>

    下载皮肤包解压后，把整个文件夹存放在laydate/skins目录下，不要改动文件名。<br/>

    比如您下载了雅兰（yalan），那么您只需要在您的js初始的时候执行：<br/>

    laydate.skin('yalan')即可使用皮肤[雅兰]了。<br/>

</body>

</html></span>

laydate 代码下载网址：https://github.com/1290800466/mac_win/tree/master/laydate

LayDate 时间选择插件的使用介绍 （低版本1.0好像是）的更多相关文章

  1. 解决低版本Eclipse安装Findbugs插件无法显示问题

    问题描述 Eclipse安装Findbugs,显示安装成功,但是重启Eclipse在[Window]-[show view]-[other]中没有显示 原因 Eclipse版本太低,新版的Findbu ...

  2. Fundebug前端JavaScript插件更新至1.8.0，兼容低版本的Android浏览器

    摘要: 兼容低版本Android浏览器,请大家及时更新. Fundebug前端BUG监控服务 Fundebug是专业的程序BUG监控平台,我们JavaScript插件可以提供全方位的BUG监控,可以帮 ...

  3. 如何恢复低版本的FlashPlayer

    本人做页游开发时,游戏用户那边经常会遇到一些很奇怪的问题.比如: 1.用户进入游戏,只显示游戏部分界面,chrome浏览器是正常的,就IE死活不行. 2.进入游戏时白屏或者一直加载不上. 3.玩游戏时 ...

  4. AngularJS进阶(二十二)实现时间选择插件

    JS实现时间选择插件 引导语 在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件.对于未接触的新事物,自己总是感觉不明觉厉.其实,有些实现可以使用很简单的方法即可.以此为例,偶 ...

  5. Flash设置（各种版本浏览器包括低版本IE）

    涉及到的各种版本flash百度下都能下到的,不再说明. Flash的安装比较麻烦,涉及多种浏览器.多种操作系统支持,安装.设置的地方比较多,以下说明基本涉及大部分安装过程中可能遇到的问题,如果安装或视 ...

  6. 兼容低版本IE浏览器的一些心得体会（持续更新）

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  7. 模拟实现兼容低版本IE浏览器的原生bind()函数功能

    模拟实现兼容低版本IE浏览器的原生bind()函数功能: 代码如下: if(!Function.prototype.bind){   Function.prototype.bind=function( ...

  8. 20款Notepad++插件下载和介绍

    转自:http://www.kuqin.com/developtool/20090628/59334.html Notepad++从3.4版本开始支持插件机制,让用户可选择的为本身已经优秀的Notep ...

  9. 高性能迷你React框架anu在低版本IE的实践

    理想是丰满的,现实是骨感的,react早期的版本虽然号称支持IE8,但是页面总会不自觉切换到奇异模式下,导致报错.因此必须让react连IE6,7都支持,这才是最安全.但React本身并不支持IE6, ...

随机推荐

  1. MAN 手册各章节功能介绍及快捷键键位整理

    前言   Man 手册页(Manua pages ,缩写man page) 是在linux操作系统在线软件文档的一种普遍形式.内容包括计算机程序库和系统调用等命令的帮助手册. 手册页是用troff排版 ...

  2. 为solr增加用户验证

    添加此功能主要是为了增加solr服务器的安全性,不能随便让人访问. 1.      在tomcat的F:\Tomcat 6.0.26_solr\conf\tomcat-users.xml添加用户角色并 ...

  3. 简单工厂法（ Factory Method)

    工厂方法 (Factory Method) Define an interface for creating an object ,but let subclasses decide which cl ...

  4. Mac OS 修改hosts文件

    这里用得是 VI 编辑器修改 打开终端(应用程序——实用工具),运行: sudo vi /etc/hosts,此时屏幕上会提示你输入密码 打开 hosts 文件之后按 i 键进入插入模式(可理解为编辑 ...

  5. 红帽配置Centos仓库[红帽Redhat7替换Centos7网络源]

    1.卸载红帽yum源 rpm -e $(rpm -qa|grep yum) --nodeps 2.删除所有repo相关文件 rm -rf /etc/yum.conf rm -rf /etc/yum.r ...

  6. python入门-操作列表

    1 Python根据缩进来进行判断代码行与前一个代码行的关系 for name in names: print(name) names = ['baker','david','philp','rose ...

  7. elk6.22

    启动错误: 参考网站:https://blog.csdn.net/feinifi/article/details/73633235?utm_source=itdadao&utm_medium= ...

  8. hive xml udf

    <store>   <book id="book"><title id="titile">hive</title> ...

  9. PHP依赖注入(DI)和控制反转(IoC)详解

    这篇文章主要介绍了PHP依赖注入(DI)和控制反转(IoC)的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 首先依赖注入和控制反转说的是同一个东西,是一种设计模式,这种设计模式用来减少程 ...

  10. C#--Winform项目核心模块--考勤模块

    C#--Winform项目核心模块--考勤模块(一) C#--Winform项目核心--考勤模块(二) C#--Winform项目核心模块--考勤模块(三)