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

  1. 版本 LayDate 1.1

  2. 作者:闲心贤

  3. github

在线实例

实例预览 layDate - js日期控件与时间插件演示

实例预览 layDate 日期选择器实例DEMO

引入文件

  1. <script src="laydate.js"></script>
复制

使用方法

  1. <input id="hello" class="laydate-icon">
  2. <script>
  3. laydate({
  4. elem: '#hello',
  5. event: 'focus'
  6. });
  7. </script>
复制

参数说明

一、核心方法:laydate(options);

  1. options是一个对象,它包含了以下key: '默认值'elem: '#id',
  2. //需显示日期的元素选择器
  3. event: 'click',
  4. //触发事件
  5. format: 'YYYY-MM-DD hh:mm:ss',
  6. //日期格式
  7. istime: false,
  8. //是否开启时间选择
  9. isclear: true,
  10. //是否显示清空
  11. istoday: true,
  12. //是否显示今天
  13. issure: true,
  14. 是否显示确认festival: true //是否显示节日
  15. min: '1900-01-01 00:00:00',
  16. //最小日期
  17. max: '2099-12-31 23:59:59',
  18. //最大日期
  19. start: '2014-6-15 23:00:00',
  20. //开始日期
  21. fixed: false,
  22. //是否固定在可视区域
  23. zIndex: 99999999,
  24. //css z-index
  25. choose: function(dates) { //选择好日期的回调
  26. }
复制

二、其它方法/属性

  1. laydate.v //获取laydate版本号
  2. laydate.skin(lib); //加载皮肤,参数lib为皮肤名
  3. /*
  4. layer.now支持多类型参数。timestamp可以是前后若干天,也可以是一个时间戳。format为日期格式,为空时则采用默认的“-”分割。
  5. 如laydate.now(-2)将返回前天,laydate.now(3999634079890)将返回2096-09-28
  6. */
  7. layer.now(timestamp, format); //该方法提供了丰富的功能,推荐灵活使用。
  8. laydate.reset(); //重设日历控件坐标,一般用于页面dom结构改变时。无参
复制

jQuery LayDate 日期控件的更多相关文章

  1. 【经验】Angularjs 中使用 layDate 日期控件

    layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...

  2. jQuery Datepicker日期控件

    datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...

  3. JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  4. jQuery UI 日期控件--datepicker

    在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...

  5. 用jquery实现日期控件

    用jquery实现的日期控件,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  6. Jquery + css 日期控件用法实例.zip

    /*==============================================================================** Filename:common.j ...

  7. 【前端控件】JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  8. laydate日期控件

    <!-- laydate 日期时间控件 下载地址 http://www.layui.com/laydate/ 这里用到版本为 layDate-v5.0.2 下载后将 laydate 文件夹放到项 ...

  9. JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日

    标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...

随机推荐

  1. Android笔记——数据库升级与降级

    一.概述 SQLite是Android内置的一个很小的关系型数据库.SQLiteOpenHelper是一个用来辅助管理数据库创建和版本升级问题的抽象类.我们可以继承这个抽象类,实现它的一些方法来对数据 ...

  2. IOS系列swift语言之课时二

    今天我们要讲的就是函数[对于函数,在最后面还有几道题,喜欢的博友可以看了自己做一下,和我交流一下] 当然这与我们的c语言还是有一定的共同之处的,对于有一些c语言或者是java基础的童鞋,我觉得是很容易 ...

  3. 传智播客--WPF基础视频学习--sender解释(小白内容)

    sender是激发该事件的对象,如果用在Button的双击点击事件上的话,就是只当前点击的对象 用例子来说明一下,有两个Button控件,分别为1和2,同时绑定一个Button_Click事件 pri ...

  4. Vue.js学习笔记(6)tree

    分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望和小颖分享下.嘻嘻 啦啦啦,代码看这里喽: <div class=" ...

  5. CSS中div覆盖另一个div

    将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...

  6. The network bridge on device VMnet0 is not running

    The network bridge on device VMnet0 is not running. The virtual machine will not be able to communic ...

  7. call,apply,bind

    一.call&apply call, apply都属于Function.prototype的方法,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法 ...

  8. MySQL Doublewrite Buffer及业务评估

    1. 关于Doublewrite Buffe的总结 Doublewrite Buffer:Doublewrite Buffer出现的初衷是防止buffer pool中的脏页刷新到磁盘中,出现部分写的问 ...

  9. 3.Struts2配置文件标签介绍

    Struts2的很多核心功能都是由拦截器实现的. struts-default.xml中定义了这些拦截器与Result类型. 所以,不继承struts-default包,Struts2提供的很多核心功 ...

  10. 在新浪云SAE中使用smarty引擎模版

    在新浪云上使用smarty时会发现又这样的错误信息: “SAE_Fatal_error: Uncaught exception 'SmartyException' with message 'unab ...