她基于原生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. Linux下安装Java环境配置步骤详述

    0.下载jdk8 登录网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html选择对 ...

  2. removeClass 按钮点击添加class效果

    html代码: <div class="game"> <span class="active">全部</span> < ...

  3. Evaluate Math Expression

    Evaluate Math Expression eryar@163.com 摘要Abstract:本文简要介绍了数学表达式解析求值的几款开源软件,并结合程序代码说明了OpenCascade中表达式包 ...

  4. dev c++ Boost库的安装

    dev c++ 的boost库的安装步骤 然后点击“check for updates”按钮 最后点击“Download selected”按钮,下载完成后安装.... 给dev添加boost库文件, ...

  5. 细说Linq之Aggregate

    前言 Linq中有关常见的方法我们已经玩的得心应手,而对于那些少用的却是置若罔闻(夸张了点),但只有在实际应用中绞尽脑汁想出的方法还不如内置的Linq方法来的实际和简洁,不喜勿喷,怪我见识短. 通过R ...

  6. WebService中使用Aspose.Cells.dll

    首先,目前我是在Json里面使用的,然后关于HTML+WebService+Json怎么使用,可以看看Jsonp跨域的相关例子. 本次的实现原理是:通过HTML传送参数到WebService,然后在W ...

  7. 利用xinetd进行时间同步

    时间同步,往往是大型项目里一个基本的需求:如果现在有多台服务器需要时间同步为标准时间,一般有如下两种做法: 一:NTP服务 将一台能上外网的服务器配成公网时间服务器(譬如:ntp服务配置文件中的0.r ...

  8. EF Code First 一对多、多对多关联,如何加载子集合?

    应用场景 先简单描述一下标题的意思:使用 EF Code First 映射配置 Entity 之间的关系,可能是一对多关系,也可能是多对多关系,那如何加载 Entity 下关联的 ICollectio ...

  9. WebWorker的importScripts方法

    简述 在<JavaScript高级程序设计(第三版)>中,提到WebWorker的importScripts方法是异步执行的,然而在 另一本书<Javascript权威指南>中 ...

  10. js晋级篇——前端内存泄漏探讨

    1.IE7/8 DOM对象或者ActiveX对象循环引用导致内存泄漏 循环引用分为两种: 第一种:多个对象循环引用 var a=new Object; var b=new Object; a.r=b; ...