layDate的使用
layDate有两种方式,一种是如果项目中已经引用了layer框架,可以直接使用,还有一种可以点击此处下载独立的插件
下载完成后,首先引入相应的js文件
<script src="/static/laydate/laydate.js"></script>
第二步,在页面中添加控件
<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>
添加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();}});
相关重要属性说明
type-控件选择类型
type属性说明
type可选值 名称 用途 year 年选择器 只提供年列表选择 month 年月选择器 只提供年、月选择 date 日期选择器 可选择:年、月、日。type默认值,一般可不填 time 时间选择器 只提供时、分、秒选择 datetime 日期时间选择器 可选择:年、月、日、时、分、秒 range-开启左右面板范围选择
默认false 如果设置 true,将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。
format-自定义格式 默认yyyy-MM-dd
格式
示例值
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 初始值
- //传入符合format格式的字符给初始值
- laydate.render({
- elem: '#test'
- ,value: '2018-08-18' //必须遵循format参数设定的格式
- });
- //传入Date对象给初始值
- laydate.render({
- elem: '#test'
- ,value: new Date(1534766888000) //参数即为:2018-08-20 20:08:08 的时间戳
- });
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的使用相关推荐
- laydate 使用
官网 http://www.layui.com/doc/modules/laydate.html 参考 http://www.cnblogs.com/fengpingfan/p/4660273.htm ...
- layui中laydate兼容ie_layui菜鸟教程--乐字节前端
主要内容 LayUI 的介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 由国人开发,16年出厂 ...
- layDate控件的使用
layDate是一个日期时间控件 可以在layui中使用layDate,也可直接使用layDate独立版 在layui模块中使用 下载layui后,引入layui.css和layui.js即可 作为独 ...
- 一款好用的JS时间日期插件layDate
觉得这个插件很不错,使用起来也很方便,推荐使用 1.插件截图 2.插件配置 选择很多,配置也很简单,插件官网:https://www.layui.com/laydate/配置说得很明确,基本操作就是: ...
- html日期英文状态显示不出来,html 时间控件插件laydate, 显示时分,不显示秒
概述 项目中使用到了时间控件,不知为何input-->date无法弹出控件,故使用了js插件laydate.根据项目需求,时间要求精度为分,故隐藏秒控件. 参考网友博客,最终实现如下. 代码 l ...
- layui 日期重置_日期时间插件--日期时间组件文档 - layui.laydate
样式: /*这里我引的是我本地的js*/ layui.use('laydate', function () { var laydate = layui.laydate; var start = { / ...
- layui table工具栏点击时间_layui table表格上添加日期控件laydate
方法:标红的地方是关键,经测试不要 data_field:'velappr' 也能用. tatable.render({ id:'idTest' ,elem: '#dict' ,page: true, ...
- 我是如何使用laydate日历插件更换掉老项目不好用的日历插件datepicker的
背景:最近整改了一个老项目系统,里面采用的是java+bootstrap+jsp写的,里面的日历插件datepicker特别不好用,容易点击失灵,我决定把它给替换了. layDate 官网:https ...
- laydate 时间控件去掉秒以及解决在移动端不能滑动的问题
一.时间控件去掉秒,保留时分 二.时间控件在移动端不能滚动 一.时间控件去掉秒,保留时分 方法一:使用 ready 回调函数 ready 控件在打开时触发.打开控件时让秒消失. <script& ...
最新文章
- MySQL图形处理软件Navicat字体配置(乱码解决)
- 面试:HashMap 夺命二十一问!
- Activity查看数据与文本框反回数据
- mysql 5.1 innodb trx_mysql 优化innodb_flush_log_at_trx_commit的案例介绍
- vue js前端根据所需参数生成二维码并下载
- JS定时器小应用--设置闹铃
- Head First设计模式读书笔记二 观察者模式
- VIP4.0-MQ消息中间件在分布式系统中的作用
- Event.ADDED_TO_STAGE的本质
- 每日算法系列【LeetCode 128】最长连续序列
- 1.软件工程--软件建模与文档协作 --- 软件开发过程
- MPI集群安装、MPI安装
- 打印流(处理流)——PrintStream,PrintWriter
- matlab快速实现线性规划求解
- linux桌面鼠标变一只手,Linux_安装鼠标主题 让 Ubuntu 的鼠标变漂亮,对ubuntu默认的白色鼠标主题厌 - phpStudy...
- 按分号读取字符串,strncpy读取乱码
- python3 extract_model.py对应代码解读抽取式提取+生成式提取摘要代码解读------摘要代码解读3
- 1's Complement和2's Complement的区别
- java实现正态分布累积分布,标准正态分布变量的累积概率分布函数
- IDEA的快捷键与qq的冲突了怎么办
热门文章
- MS SQL SERVER2005 分页存储过程
- sqlplus SPOOL 导出网页文件
- 支付宝支付 第十二集:狂神、飞哥支付宝支付配置代码(免费资源,拿走不谢)
- oracle中同义词的用法,Oracle中使用同义词介绍
- rabbitmq 限制速度_技术干货分享:RabbitMQ消息积压的几种解决思路
- 计算机数控装置论文,数控专业(论文)范文.doc
- c语言猜拳游戏中出现的关键词,C语言猜拳游戏代码及分析
- onclick 获取点击之后的img 的id_前端,点击按钮跳出视频带蒙层,且视频永远居于屏幕中间...
- java 异步事件_处理异步事件的三种方式
- opencv ocr字符识别_OCR深度实践系列:图像预处理