<!--

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. duilib属性列表

    <?xml version="1.0" encoding="UTF-8"?> <!-- 可能有错漏,欢迎补充.wangchyz(wangchy ...

  2. C/C++使用Socket通信UDP

    接收端 #include <stdio.h> #include <WinSock2.h> #pragma comment(lib,"WS2_32.lib") ...

  3. SAP HCM 前台字段显示与隐藏

    https://blog.csdn.net/qq_29475437/article/details/82107452 1.在hcm屏幕上 确定 程序名称 与屏幕编号 2.SM30 输入 T588M,如 ...

  4. 关于mysql8.0.11版本在win10安装

    新的mysql版本没有.exe文件一键安装,网上找了教程,自己搞了下 首先是在菜鸟教程 http://www.runoob.com/mysql/mysql-install.html 根据它的提示下载w ...

  5. Co. - Apple - MacBook Pro 快捷键

    Mac 键盘快捷键:https://support.apple.com/zh-cn/HT201236 从windows转到mac的童鞋,可能删除键是心中的一个痛,以前习惯一按delete什么都消失,其 ...

  6. 深度解析JQuery Dom元素操作技巧

    深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...

  7. Solr简单总结

    Solr 运行Solr服务 方式一:Jetty服务器启动Solr 进入solr-4.10.2/example目录 打开命令行,执行java –jar start.jar命令,即可启动Solr服务 打开 ...

  8. Linux 新建定时任务

    Linux 新建定时任务: 1.查看指定用户列表: crontab -u apache -l 2.切换至对应用户,这里是apache su apache 3.新增定时任务: crontab -e 写入 ...

  9. Ubuntu设置代理服务器

    由于公司网络的原因,apache的网站访问不了,对于需要经常访问apache网站查看文档的我,最近想了一种方法,在自己的阿里云服务器上搭建一个代理服务器.经过查资料,最终决定使用TinyProxy. ...

  10. web学习第一天

    学习web心得 表格 table,表单 form,跑马灯效果 marquee,导入背景图片<img src="图片路径"> 第一天学的不是很难,作业也相对来说比较简单, ...