<!--

laydate 日期时间控件

下载地址 http://www.layui.com/laydate/

这里用到版本为 layDate-v5.0.2

下载后将 laydate 文件夹放到项目根目录

对于输入框，如果用户乱填 laydate会智能纠错。（可以尝试在上述表单输入任意值，然后点击页面其它处测试一下）

注意事项

1，解压后，将压缩包内laydate整个文件夹放至项目的任意目录，不要移动其文件结构，它们具有完整的依赖体系。

2，使用只需在页面引入laydate.js即可。

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

thinkPHP调用需要把 laydate 文件夹放到根目录，然后在模板页中按如下方式调用

-->

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>layDate 独立版</title>

</head>

<body>

<input type="text" id="test_txt" placeholder="yyyy-MM-dd"/>

<input type="button" id="test_but" value="点我也弹日期面板"/>

<div id="test_div">测试DIV</div>

<script type="text/javascript" src="laydate/laydate.js"></script>

<script type="text/javascript">

//执行一个laydate实例

var test_var = laydate.render({

    elem: '#test_txt' //指定元素

    //使用时选择一种type类型即可

    //年选择器

    ,type: 'year'

    //年月选择器

    ,type: 'month'

    //时间选择器

    ,type: 'time'

    //日期时间选择器

    ,type: 'datetime'

    //日期选择器

    ,type: 'date'

    //国际版 变成英文

    //,lang: 'en'

    //自定义格式

    //,format: 'yyyy年M月d日H时m分s秒'

    //限定可选日期

    //可选最小日期

    ,min: '2017-08-05'

    //可选最大日期

    ,max: '2017-09-13'

    //前后若干天可选，这里以7天为例

    ,min: -7

    ,max: 7

    //限定可选时间

    ,min: '2017-08-05 09:30:00'

    ,max: '2017-09-13 17:30:00'

    //限定面板下方显示的按钮，这里是 清空，现在，确定三个按钮

    //,btns: ['clear', 'now', 'confirm']

    //打开日期面板默认选中值

    ,value: '2017-08-29'

    //面板打开后执行其中动作

    ,ready: function(){

        //提示内容

        test_var.hint('日期可选值设定在 <br> 2017-08-05 到 2017-09-13');

    }

    //选中日期确定后的回调

    ,done: function(value, date){

        alert('done你选择的日期是：' + value + '\n获得的对象是' + JSON.stringify(date));

    }

    //面板点击日期切换（并未确定）时回调

    ,change: function(value, date){

        alert('change你选择的日期是：' + value + '\n\n获得的对象是' + JSON.stringify(date));

    }

    //不出现底部栏

    //,showBottom: false

    //自定触发义事件，这里指定当鼠标指针移动到元素上方，并按下鼠标按键时

    ,trigger: 'mousedown'

    //,trigger: 'click'

    //额外设定可触发元素，同点击本身元素同触发条件

    ,eventElem: '#test_but'

});

//非input元素

laydate.render({

    elem: '#test_div'

});

</script>

</body>

</html>

laydate日期控件的更多相关文章

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

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

  2. jQuery LayDate 日期控件

    她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封 ...

  3. 介绍Web项目中用到的几款JS日历日期控件和JS文本编辑框插件

    第一款日历日期控件:layDate 官方网站:http://laydate.layui.com/ 第二款日历日期控件:my97 官方网站:http://www.my97.net/ 第三款 文本编辑器控 ...

  4. layDate1.0正式公布，您一直在寻找的的js日期控件

    你是时候换一款日期控件了,而layDate很愿意和您成为工作伙伴.她正致力于成为全球最高大上的web日期支撑,为国内外全部从事web应用开发的同仁提供力所能及的动力.她基于原生JavaScript精心 ...

  5. layui table 表格上添加日期控件

    方法一: var tableInit = table.render({ elem: '#tbtxrz' , method: 'post' , data: jsonData , height: &quo ...

  6. bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法

    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...

  7. my97DatePicker日期控件——日期输入框联动，使用focus使第二个输入框没展示出日期控件

    描述问题场景: 1.jquery使用的版本是jquery-1.7.2.min.js 2.代码不是写在页面上的,是通过事件后追加的 <!DOCTYPE html> <html> ...

  8. 怎样使用My97日期控件

    有网友说无法使用My97日期控件,Insus.NET测试一下,是可以正常使用了. 在ASP.NET MVC环境中测试. 去官网下载My97日期控件程序包: 下载解压之后,把程序的目录拷贝至projec ...

  9. jQuery Datepicker日期控件

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

随机推荐

  1. 带你解析Java类加载机制

      目录 Java类加载机制的七个阶段 加载 验证 准备(重点) 解析 初始化(重点) 使用 卸载 实战分析 方法论 树义有话说 在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如 ...

  2. Navicat for Mysql中错误提示索引过长1071-max key length is 767 byte

    1.建用户信息表 tb_person_info create table tb_person_info( user_id int(10) auto_increment, `name` varchar( ...

  3. html5语义化标签——回顾

    html5 头部结构   <!doctype html>    <meta charset=“utf-8”/> <header></header> 页眉 ...

  4. [洛谷P1390]公约数的和·莫比乌斯反演

    公约数的和 传送门 分析 这道题很显然答案为 \[Ans=\sum_{i=1}^n\sum_{j=i+1}^n (i,j)\] //其中\((i,j)\)意味\(gcd(i,j)\) 这样做起来很烦, ...

  5. ABAP术语-Authorization Object

    Authorization Object 原文:http://www.cnblogs.com/qiangsheng/archive/2007/12/20/1006585.html Element of ...

  6. MySQL实现序列自增

    #创建序列表 DROP TABLE IF EXISTS `sequence`; CREATE TABLE `sequence` ( `name` ) NOT NULL COMMENT '序列名称', ...

  7. Markdown基本使用

    最近在写毕业论文,打算列个提纲,觉得有条理的搜集资料规划布局很重要,用Markdown写即有利于增强我的编写接口文档能力,也便于查看. markdown编写软件很多,markdownpad不错(mar ...

  8. 高级同步器：交换器Exchanger

    引自:https://blog.csdn.net/Dason_yu/article/details/79764467 一.定义每个线程将条目上的某个方法呈现给 exchange 方法,与伙伴线程进行匹 ...

  9. PyCharm+QT Designer整合

    CMD下使用pip安装PyQt4或者PYQT5 这里要注意,你下载的PYQT5不包含QT designer 还要:pip3 install PyQt5-tools,好像Pyqt5中将designer分 ...

  10. No configuration found for this host:al

    想尝试多个agent来进行传输数据其中的一个配置文件如下: al.sources = r1al.sinks = k1al.channels = c1 al.sources.r1.type = avro ...