她基于原生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. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  2. 【夔堂】:程序血泪史之——有一种垃圾语言叫做JavaScript

    "Prototype"机制是个半成品OOP,有些文章说这玩意当初为了"简单(编写).容易(学习)"而发明的,但web前端技术发展到今天我们看到,JS显然是需要O ...

  3. VMware Tools安装小结

    背景介绍:在VMware上装完ArchLinux后,窗口太小,操作不方便.查询后得知VMware Tools没有自动安装,需要手动安装. 官方安装说明:在 Linux 虚拟机中手动安装或升级 VMwa ...

  4. OpenCASCADE View Manipulator

    OpenCASCADE View Manipulator eryar@163.com Abstract. When you finish modeling objects in the scene, ...

  5. C#中使用Redis不同数据结构的内存占有量的疑问和对比测试

    最近在大量使用Redis来进行数据统计前的清洗和整理,每天的数据量超5千万+,在开发过程中,数据量小,着重注意业务规则的处理,在上线基本测试后发现了大量的问题,其中之一就是Redis存储数据过多,内存 ...

  6. 详解 ML2 Core Plugin(II) - 每天5分钟玩转 OpenStack(72)

    上一节我们讨论了 ML2 Plugin 解决的问题,本节将继续研究 ML2 的架构. ML2 对二层网络进行抽象和建模,引入了 type driver 和 mechansim driver. 这两类 ...

  7. CodeIgniter笔记-去掉index.php

    1.修改Apache 的配置文件把LoadModule rewrite_module modules/mod_rewrite.so该行前的#去掉. 2.将 AllowOverride None ,修改 ...

  8. 分享一段数据库中表数据更新SQL

    应用场景 我们在应用程序开发的时候,经常会遇到这样的一种情况:附属表更新了,主表的数据没有更新,这个关联表不只是外键的关联(通过附属表 ID 关联),主表中还会存在一些附属表的字段,这样一般做的目的是 ...

  9. Java中的反射机制

    Java反射机制 反射机制定义 反射机制是Java语言中一个非常重要的特性,它允许程序在运行时进行自我检查,同时也允许其对内部成员进行操作.由于反射机制能够实现在运行时对类进行装载,因此能够增加程序的 ...

  10. jQuery-1.9.1源码分析系列(十五) 动画处理

    首先需要有队列(queue)的基本知识.见上一章. a.动画入口jQuery.fn.animate函数执行流程详解 先根据参数调用jQuery.speed获取动画相关参数,得到一个类似如下的对象:并且 ...