使用Layui时间组件（laydate）

article/2025/9/17 3:08:52

在一般的程序或者软件业务的操作上，通常涉及时间的记录，需要记录业务时间，或者根据时间来筛选业务。
选择时间，可以直接输入，也可以弹出日期进行选择。
在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">&#xe637;</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">&#xe637;</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">&#xe637;</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时间日期控件中的中文版和英文版，其实区别不是很大，区别是弹出或嵌套显示的
时间日期选择页面中的中文全部英文形式代替，如果格式一样，那么进行选择后显示的是一样的。
主要以阿拉伯数字显示。