在一般的程序或者软件业务的操作上,通常涉及时间的记录,需要记录业务时间,或者根据时间来筛 选业务。
选择时间,可以直接输入,也可以弹出日期进行选择。
在layui中提供了,layDate日期时间模块,
主要提供了五种选择器:年选择器,年月选择器,日期选择器,时间选择器,日期时间选择器。
<div class="layui-inline">
<label class="layui-form-label">中文版:</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="Chinese" placeholder="yyyy-MM-dd">
<i class="layui-icon Date_icon"></i>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">国际版:</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="English" placeholder="yyyy-MM-dd">
<i class="layui-icon Date_icon"></i>
</div>
</div>
<div class="layui-inline mt-3">
<label class="layui-form-label" style="width:120px;">日期时间选择器:</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="shijianriqi" placeholder="yyyy-MM-dd HH:mm:ss">
<i class="layui-icon Date_icon"></i>
</div>
</div>
<h6 class="mb-3 mt-3">嵌套显示</h6>
<div class="site-demo-laydate">
<div class="layui-inline mr-3" id="nestnne"></div>
<div class="layui-inline ml-3" id="nestwo"></div>
</div>
<script>
//声明变量
var layer, layDate;
$(function () {
//预加载模块
layui.use(['layer', 'laydate'], function () {
//加载模块
layer = layui.layer;
layDate = layui.laydate;
//中文
layDate.render({
elem: '#Chinese',//绑定元素
theme:'#393D49'//主题
});
//英文
layDate.render({
elem: '#English',
lang: 'en',
theme: '#ff0000'
});
//日期时间选择器
layDate.render({
elem: '#shijianriqi',
type:'datetime',
theme: '#000000'
});
//嵌套显示
layDate.render({
elem: '#nestnne',
theme: '#ff0000',
position: 'static'
});
layDate.render({
elem: '#nestwo',
lang: 'en',
theme: '#ea7c12',
position: 'static'//页面嵌套显示
});
});
});
</script>
layui的laydate模块提供多属性支持,可嵌套在页面上,可设置主题的颜色等等。
layui的laydate模块,提供了type–控件选择类型:
type可选值 | 名称 | 用途 |
---|---|---|
year | 年选择器 | 只提供年列表选择 |
date | 年月选择器 | 只提供年、月选择 |
year | 日期选择器 | 可选择:年、月、日。type默认值,一般可不填 |
time | 时间选择器 | 只提供时、分、秒选择 |
datetime | 日期时间选择器 | 可选择:年、月、日、时、分、秒 |
laydate提供format属性–自定义时间格式 默认格式:yyyy-MM-dd
Layui的laydate时间日期控件中的中文版和英文版,其实区别不是很大,区别是弹出或嵌套显示的
时间日期选择页面中的中文全部英文形式代替,如果格式一样,那么进行选择后显示的是一样的。
主要以阿拉伯数字显示。
laydate详情请查看Layui官网:https://www.layui.com/