<!--

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. EF core Code First 简单的使用方法

    好吧,我又回来了,其实一直都想写一篇关于EF core 的文章去记录自己在开发时候遇到的问题. 为什么要使用EF框架呢,因为原始的ADO.NET需要编写大量的数据访问代码,所以使用EF会更方便.但是今 ...

  2. JS高级. 02 面向对象、创建对象、构造函数、自定义构造函数、原型

    面向对象的三大特性: 封装 a)  把一些属性和方法装到一个对象里 2.  继承 a)  js中的继承是指:   一个对象没有一些方法和属性,而另一个对象有 把另一个个对象的属性和方法,拿过来自己用, ...

  3. Vue+webpack构建一个项目

    1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...

  4. php 电商系统SKU库存设计

    sku 全称为:Stock Keeping Unit,是库存进出计量的基本单元. 我们一般会在电商网站基本都会看到 比如淘宝,JD 淘宝和JD的 方式可能不一样,因为我不清楚他们具体是如何设计的, J ...

  5. Drupal 网站漏洞修复以及网站安全防护加固方法

    drupal是目前网站系统使用较多一个开源PHP管理系统,架构使用的是php环境+mysql数据库的环境配置,drupal的代码开发较为严谨,安全性较高,但是再安全的网站系统,也会出现网站漏洞,dru ...

  6. DedeCMS V5.7sp2最新版本parse_str函数SQL注入漏洞

    织梦dedecms,在整个互联网中许多企业网站,个人网站,优化网站都在使用dede作为整个网站的开发架构,dedecms采用php+mysql数据库的架构来承载整个网站的运行与用户的访问,首页以及栏目 ...

  7. Python自动化运维——文件内容差异对比

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 模块:difflib 安装:Python版本大于等于2.3系统自带 功能:对比文本之间的差异,而且支持输出可读性比 ...

  8. loj136 (最小瓶颈路,多次询问)

    题目描述 给定一个包含 n nn 个节点和 m mm 条边的图,每条边有一个权值.你的任务是回答 k kk 个询问,每个询问包含两个正整数 s ss 和 t tt 表示起点和终点,要求寻找从 s ss ...

  9. RTSC和XDCTool的理解

    1. 在使用TI的开发工具CCS中,里面有几个重要的概念,一直不太清晰,RTSC是什么,XDCTool是什么?包是什么?包的版本为啥都是4位的(比如mathlib_c66x_3_0_1_1)?star ...

  10. 【C#】 RBAC 权限框架

    [C#] RBAC 权限框架 一. 名词解释 1. 用户 : 登录的账号, 和角色挂钩,可拥有多个角色 2. 角色 : 账号所属的角色, 和权限挂钩,可拥有多个权限 3. 权限 : 角色拥有的操作权限 ...