layui时间控件的简单使用

在做功能中，时间条件查询必不可少，最常见的就是单个日期选择、日期范围选择。layui的时间控件是比较好看并且实用的控件了，可以设置样式主题颜色、日期格式等等，使用起来也比较方便，这里我记录一下简单的使用满足基本的要求，更多的请参考官方文档，仅为记录使用方式，以便下次使用，如果有错误的地方还请多多指导。

首先我们需要引入layui的css、js文件。

这里要注意的是我使用的相对路径，从此html页面寻找到js和css。

在body里面写一个layui的时间标签

<body><div class="layui-inline"><label class="layui-form-label">中文版</label><div class="layui-input-inline"><input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd"></div></div></body>

最后一步，初始化我们的时间标签，layui可以采用模块化加载，减轻了单个页面的压力。我们需要使用到什么js就在layui.use([‘xxx’,‘xxx’],function(){});这里我们只需要使用到渲染时间的laydate。

 <script>layui.use('laydate', function () {var laydate = layui.laydate;//执行一个laydate实例laydate.render({elem: '#test1' //指定元素，input的id,value:new Date()//初始值为当前日期,type: 'date'//时间格式 date表示 yyyy-MM-dd});});</script>

我们看一下效果图

全部代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单日期选择</title><link rel="stylesheet" href="../../layui/css/layui.css"  media="all"><script src="../../layui/layui.js" charset="utf-8"></script></head><body><div class="layui-inline"><label class="layui-form-label">中文版</label><div class="layui-input-inline"><input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd"></div></div></body><script>layui.use('laydate', function () {var laydate = layui.laydate;//执行一个laydate实例laydate.render({elem: '#test1' //指定元素，input的id,value:new Date()//初始值为当前日期,type: 'date'//时间格式 date表示 yyyy-MM-dd});});</script>
</html>

如果我们想要设置显示的日期格式比如说年、年月、年月日等那么设置type属性为对应的值。

主题风格属性theme

怎么得到选中的时间？，直接用获取Input输入框的值直接获取即可。
其它更多的使用规则请参考layui官方文档。

layui时间控件的简单使用相关推荐

layui时间控件 laydate 重置失效
layui时间控件 laydate 重置失效问题描述页面代码问题处理问题描述 layui日期控件laydate引入页面后,页面开始时间小于结束时间,结束时间最大为当前时间,展示效果如图,第一次 ...
layui时间控件在谷歌浏览器中闪退
laydate闪退现象原因分析解决办法注意现象当日期控件弹出的界面在输入框之上时,如下图所示的红色矩形框所在的位置, 如果弹出日期控件的位置上下足够,并不覆盖输入框时,则不会出现这样的情况 ...
Layui时间选择器，Layui时间控件选择时间范围的方法
官方文档:https://www.layui.site/doc/modules/laydate.html 通用时间渲染函数 function renderTime(elem, type, value, ...
layui 日期范围选择器_layui时间控件选择时间范围的实现方法
解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择共有两种解决方式: 方式一(layui 1.x): html代码: placeholder="开始时间(修改时间)&qu ...
HTML5超简单的日期时间控件
HTML5超简单的日期时间控件时间都是宝贵的,尤其是开发人员,所以为了节省时间,我直接展示下效果,符合您的要求就采纳,不符合,就不用继续看了! 1.1 日期控件效果: 1.2 时间控件展示: 2.1 ...
layui layDate时间控件绑定多个文本框组件
layDate.js下载地址多个输入框都是实现选择日期时间,通过class去循环遍历绑定时间控件. <div><input type="text" class= ...
html页面时间段开始结束,使用layui日期控件laydate对开始和结束时间进行联动控制的方法...
1.在页面先引入laydate.js文件 2.html页面控件如下: 3.html页面js代码如下: //年月选择器 laydate.render({ elem: '#begin_time' ,typ ...
bootstrap-datetimepicker时间控件添加清除按钮
本文转自:https://blog.csdn.net/gyysmile/article/details/80226993 其实这位大神写的很好了,为什么我还要在写呢,因为我想写点东西了最近测试部提出 ...
bootstrap日期时间控件
datetime控件 Bootstrap的日期时间控件,使用非常的简单. 首先,添加日期时间控件的引用 @*datetime控件*@<link href="~/Content/Boot ...

layui时间控件的简单使用

首先我们需要引入layui的css、js文件。

在body里面写一个layui的时间标签

最后一步，初始化我们的时间标签，layui可以采用模块化加载，减轻了单个页面的压力。我们需要使用到什么js就在layui.use([‘xxx’,‘xxx’],function(){});这里我们只需要使用到渲染时间的laydate。

layui时间控件的简单使用相关推荐

最新文章

热门文章