1. layDate有两种方式,一种是如果项目中已经引用了layer框架,可以直接使用,还有一种可以点击此处下载独立的插件

  2. 下载完成后,首先引入相应的js文件

    <script src="/static/laydate/laydate.js"></script> 

  3. 第二步,在页面中添加控件

    <div class="layui-inline"><div class="layui-input-inline"><label class="layui-form-label">日期选择</label><input type="text" class="layui-input" id="dateinput"  placeholder="点击选择日期">    </div>
    </div>

  4. 添加js文件渲染控件

    laydate.render({elem: '#dateinput', #指定元素value: adminChooseDate, #初始值 istime: true, type:'date', #控件选择类型,theme: 'molv'  #主题,可供选择,也可以用颜色,done: function(value, date, endDate){window.location.href='/admin/getLog?date='+value+'&a='+new Date();}});

  5. 相关重要属性说明

    1.  type-控件选择类型
      type属性说明
      type可选值 名称 用途
      year 年选择器 只提供年列表选择
      month 年月选择器 只提供年、月选择
      date 日期选择器 可选择:年、月、日。type默认值,一般可不填
      time 时间选择器 只提供时、分、秒选择
      datetime 日期时间选择器 可选择:年、月、日、时、分、秒
    2. range-开启左右面板范围选择

    3. 默认false
      如果设置 true,将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。

      format-自定义格式 默认yyyy-MM-dd

    1. 格式

      示例值

      yyyy-MM-dd HH:mm:ss 2017-08-18 20:08:08
      yyyy年MM月dd日 HH时mm分ss秒 2017年08月18日 20时08分08秒
      yyyyMMdd 20170818
      dd/MM/yyyy 18/08/2017
      yyyy年M月 2017年8月
      M月d日 8月18日
      北京时间:HH点mm分 北京时间:20点08分
      yyy年的M月某天晚上,大概H点 2017年的8月某天晚上,大概20点
      4. value  初始值
  1. //传入符合format格式的字符给初始值
  2. laydate.render({
  3. elem: '#test'
  4. ,value: '2018-08-18' //必须遵循format参数设定的格式
  5. });
  6. //传入Date对象给初始值
  7. laydate.render({
  8. elem: '#test'
  9. ,value: new Date(1534766888000) //参数即为:2018-08-20 20:08:08 的时间戳
  10. });

    5. 获取用户选择的时间 

laydate.render({elem: '#test',done: function(value, date, endDate){console.log(value); //得到日期生成的值,如:2017-08-18console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
  }
});

  其他属性详见LayUI官网

转载于:https://www.cnblogs.com/tianliuyang/p/9415184.html

layDate的使用相关推荐

  1. laydate 使用

    官网 http://www.layui.com/doc/modules/laydate.html 参考 http://www.cnblogs.com/fengpingfan/p/4660273.htm ...

  2. layui中laydate兼容ie_layui菜鸟教程--乐字节前端

    主要内容 LayUI 的介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 由国人开发,16年出厂 ...

  3. layDate控件的使用

    layDate是一个日期时间控件 可以在layui中使用layDate,也可直接使用layDate独立版 在layui模块中使用 下载layui后,引入layui.css和layui.js即可 作为独 ...

  4. 一款好用的JS时间日期插件layDate

    觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...

  5. html日期英文状态显示不出来,html 时间控件插件laydate, 显示时分,不显示秒

    概述 项目中使用到了时间控件,不知为何input-->date无法弹出控件,故使用了js插件laydate.根据项目需求,时间要求精度为分,故隐藏秒控件. 参考网友博客,最终实现如下. 代码 l ...

  6. layui 日期重置_日期时间插件--日期时间组件文档 - layui.laydate

    样式: /*这里我引的是我本地的js*/ layui.use('laydate', function () { var laydate = layui.laydate; var start = { / ...

  7. layui table工具栏点击时间_layui table表格上添加日期控件laydate

    方法:标红的地方是关键,经测试不要 data_field:'velappr' 也能用. tatable.render({ id:'idTest' ,elem: '#dict' ,page: true, ...

  8. 我是如何使用laydate日历插件更换掉老项目不好用的日历插件datepicker的

    背景:最近整改了一个老项目系统,里面采用的是java+bootstrap+jsp写的,里面的日历插件datepicker特别不好用,容易点击失灵,我决定把它给替换了. layDate 官网:https ...

  9. laydate 时间控件去掉秒以及解决在移动端不能滑动的问题

    一.时间控件去掉秒,保留时分 二.时间控件在移动端不能滚动 一.时间控件去掉秒,保留时分 方法一:使用 ready 回调函数 ready 控件在打开时触发.打开控件时让秒消失. <script& ...

最新文章

  1. MySQL图形处理软件Navicat字体配置(乱码解决)
  2. 面试:HashMap 夺命二十一问!
  3. Activity查看数据与文本框反回数据
  4. mysql 5.1 innodb trx_mysql 优化innodb_flush_log_at_trx_commit的案例介绍
  5. vue js前端根据所需参数生成二维码并下载
  6. JS定时器小应用--设置闹铃
  7. Head First设计模式读书笔记二 观察者模式
  8. VIP4.0-MQ消息中间件在分布式系统中的作用
  9. Event.ADDED_TO_STAGE的本质
  10. 每日算法系列【LeetCode 128】最长连续序列
  11. 1.软件工程--软件建模与文档协作 --- 软件开发过程
  12. MPI集群安装、MPI安装
  13. 打印流(处理流)——PrintStream,PrintWriter
  14. matlab快速实现线性规划求解
  15. linux桌面鼠标变一只手,Linux_安装鼠标主题 让 Ubuntu 的鼠标变漂亮,对ubuntu默认的白色鼠标主题厌 - phpStudy...
  16. 按分号读取字符串,strncpy读取乱码
  17. python3 extract_model.py对应代码解读抽取式提取+生成式提取摘要代码解读------摘要代码解读3
  18. 1's Complement和2's Complement的区别
  19. java实现正态分布累积分布,标准正态分布变量的累积概率分布函数
  20. IDEA的快捷键与qq的冲突了怎么办

热门文章

  1. MS SQL SERVER2005 分页存储过程
  2. sqlplus SPOOL 导出网页文件
  3. 支付宝支付 第十二集:狂神、飞哥支付宝支付配置代码(免费资源,拿走不谢)
  4. oracle中同义词的用法,Oracle中使用同义词介绍
  5. rabbitmq 限制速度_技术干货分享:RabbitMQ消息积压的几种解决思路
  6. 计算机数控装置论文,数控专业(论文)范文.doc
  7. c语言猜拳游戏中出现的关键词,C语言猜拳游戏代码及分析
  8. onclick 获取点击之后的img 的id_前端,点击按钮跳出视频带蒙层,且视频永远居于屏幕中间...
  9. java 异步事件_处理异步事件的三种方式
  10. opencv ocr字符识别_OCR深度实践系列:图像预处理