<!--

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. 安装sass遇到的坑

    一.安装Sass https://www.sass.hk/install/ 根据网站的步骤进行安装 Ruby版本的选择 我第一次下载是在Ruby官网上下的2.5.0版本得ruby.然而下载了之后无(不 ...

  2. 关于对连接数据库时出现1130-host “**” is not allowed to connect to this MySql/mariadb server 的错误解决方法

    在完成mariadb的搭建后,在端口与防火墙均为正常的情况下,出现了1130- Host xxx is not allowed to connect to this MariaDb server 的情 ...

  3. Ubuntu 18.04添加新网卡

    在Ubuntu 18.04 LTS上配置IP地址的方法与旧方法有很大不同.与以前的版本不同,Ubuntu 18.04使用Netplan(一种新的命令行网络配置实用程序)来配置IP地址. 在这种新方法中 ...

  4. CSS基础全荟

    一.CSS概述 1.css是什么?? 层叠样式表 2.css的引入方式 1.行内样式   在标签上加属性style="属性名1:属性值1;属性名2:属性值2;..." 2.内嵌式  ...

  5. weex踩坑记录

    weex框架样式问题--我暂时使用最基本的样式css,weex前端开发的话web端会显示各种的html标签.写出的样式也都会显示的很好,但是在app端的话,就没有很好的兼容性,只是支持文档中的一些标签 ...

  6. jQuery(一)初识

    jQuery 的功能概括 1.html 的元素选取 2.html的元素操作 3.html dom遍历和修改 4.js特效和动画效果 5.css操作 6.html事件操作 7.ajax异步请求方式 se ...

  7. Hadoop(7)-HDFS客户端的API操作

    1 客户端环境准备 根据自己电脑的操作系统拷贝对应的编译后的hadoop jar包到非中文路径 配置HADOOP_HOME的环境变量,并且在path中配置hadoop的bin 重启电脑 2. Hdfs ...

  8. eclipse 右键没有Build Path

    如果Project Explorer右键没有build pathWindow ->show view 选择package explorer 参考https://blog.csdn.net/cod ...

  9. ruby 数据类型Range

    范围(Range)无处不在:a 到 z. 0 到 9.等等.Ruby 支持范围,并允许我们以不同的方式使用范围: 作为序列的范围 作为条件的范围 作为间隔的范围 作为序列的范围 (1..5) #==& ...

  10. shell重温---基础篇（shell数组&数组操作）

    上篇博客已经分析重温了shell的运行方式以及其中的变量还有字符串,之后按照套路就是数组方面了,废话不多说,直接进入正题哈.(小白笔记,各位看官勿喷...)     bash shell呢,支持一位数 ...