<!--

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. 2018 Wannafly summer camp Day3--Knight

    Knight 题目描述: 有一张无限大的棋盘,你要将马从\((0,0)\)移到\((n,m)\). 每一步中,如果马在\((x,y)(x,y)\),你可以将它移动到 \((x+1,y+2)(x+1,y ...

  2. sersync实时同步实战

    第1章 实时同步 1.1 什么是实时同步 实时同步是一种只要当前目录触发事件,就马上同步到远程的目录.rsync 1.2 为什么要实时同步web->nfs->backup 保证数据的连续性 ...

  3. 利用nginx使ftp可以通过http访问

    ./nginx 启动服务./nginx -s stop 关闭服务./nginx -s reload 重新加载配置文件 搭建nginx映射ftp服务:打开nginx的配置文件nginx.conf(位于n ...

  4. Apache Maven（七）：settings.xml

    settings.xml 文件中包含settings标签,这个标签可以配置如何去执行Maven.其中包括本地存储库位置,备用远程存储库服务器和身份验证信息等值. 有如下两个位置可能存放这setting ...

  5. YII2.O学习三 前后台用户数据表分离

    之前我们完成了Advanced 模板安装,也完成了安装adminlte 后台模板,这一步是针对前端和后台用户使用不同的数据库表来管理,做到前后台用户分离的效果: 复制一张user数据表并重命名为adm ...

  6. angularjs路由不断刷新当前页面

    最近做项目遇到个问题,使用angular-route的时候,第一次点击 [按钮 a]会进入按钮a对应的控制器,接着再次点击a按钮的的时候就不会进入控制器了.我想要的效果是每次点击都能进入control ...

  7. Java应用：经纬度匹配（geohash加密）

    本文采用http://gc.ditu.aliyun.com地址进行经纬度匹配,无数量限制 如果给定经纬度进行geohash加密操作,先解密得到相应gps坐标,具体程序如下所示: import java ...

  8. Python面向对象的类的操作

    import randomimport time class ElectronicCoupon(): def __init__(self): self.__ecid=time.strftime('%Y ...

  9. vue---day02

    1. 全局组件的注册 - 创建根实例的时候,data可以是object,也可以是函数 - 创建组件的时候,data必须是函数 1.1 创建 Vue.component('global-componen ...

  10. react项目中引入百度地图打包报错问题

    一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...