-

日期和时间组件文档【全局加载layui】

如你所见,无论曾经它给你带来过多么糟糕的体验,从今往后,所有的旧坑都将弥合。全面重写的 layDate 包含了大量的更新,其中主要以:年选择器年月选择器日期选择器时间选择器日期时间选择器 五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。内置强劲的自定义日期格式解析和合法校正机制,含中文版和国际版,主题简约却又不失灵活多样。由于内部采用的是零依赖的原生 JavaScript 编写,因此又可作为独立组件使用。毫无疑问,这是 layui 的虔心之作。
引入layui全局类库
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.all.js" charset="utf-8"></script>
格式 示例值
yyyy-MM-dd HH:mm:ss 2024-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒 2024年08月18日 20时08分08秒
yyyyMMdd 20240818
dd/MM/yyyy 18/08/2024
yyyy年M月 2024年8月
M月d日 8月18日
北京时间:HH点mm分 北京时间:20点08分
yyyy年的M月某天晚上,大概H点 2024年的8月某天晚上,大概20点
layui时间选择器用法
HTML元素上绑定对应class或者id值即可,简单快捷

Demo用法

常规用法
五大选择器
范围选择
联动范围选择
-
自定义格式
同时绑定多个
控制可选的日期与时间
这里以控制在9:30-17:30为例
其它功能示例
自定义按钮主题
直接嵌套显示
获得源码
获得源码
获得源码
获得源码
获得源码
format - 自定义格式

类型:String,默认值:yyyy-MM-dd

通过日期时间各自的格式符和长度,来设定一个你所需要的日期格式。layDate 支持的格式如下:

格式符 说明
yyyy 年份,至少四位数。如果不足四位,则前面补零
y 年份,不限制位数,即不管年份多少位,前面均不补零
MM 月份,至少两位数。如果不足两位,则前面补零。
M 月份,允许一位数。
dd 日期,至少两位数。如果不足两位,则前面补零。
d 日期,允许一位数。
HH 小时,至少两位数。如果不足两位,则前面补零。
H 小时,允许一位数。
mm 分钟,至少两位数。如果不足两位,则前面补零。
m 分钟,允许一位数。
ss 秒数,至少两位数。如果不足两位,则前面补零。
s 秒数,允许一位数。

通过上述不同的格式符组合成一段日期时间字符串,可任意排版,如下所示:

//自定义日期格式
layui.laydate.render({ 
  elem: '#test'
  ,format: 'yyyy年MM月dd日' //可任意组合
});
      

layui - 在每一个细节中,用心与你沟通