当前博客:33-快码FOF中文编程layui教学-组件:日期和时间组件

293 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

日期和时间选择器,顾名思义就是选择时间的,一般用于,注册生日、时间预约、时间筛选等。

layui内置的日期和时间选择器,主要以: 年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心,

并且均支持范围选择。并且内置强劲的自定义日期格式解析, 含中文版和国际版两个版本。

基础日期和时间选择器代码:

<数据框 数据类型="文本输入" 类名="lay-输入框" id="演示1" 默认提示="yyyy-MM-dd" />
<脚本>
    新建对象 lay_日期({
    	[lay_日期.配置.绑定元素]: "#演示1",
    });
</脚本>
Markup

代码效果展示:

英文版代码示例:

新建对象 lay_日期({
	[lay_日期.配置.绑定元素]: "#演示1-1",
	[lay_日期.配置.语言]: lay_日期.语言.英文,
});
JavaScript

代码效果展示:

年选择器代码示例:

新建对象 lay_日期({
	[lay_日期.配置.绑定元素]: "#演示2",
	[lay_日期.配置.类型]: lay_日期.类型.年,
});
JavaScript

代码效果展示:

年月选择器代码示例:

新建对象 lay_日期({
	[lay_日期.配置.绑定元素]: "#演示3",
	[lay_日期.配置.类型]: lay_日期.类型.月,
});
JavaScript

代码效果展示:

时间选择器代码示例:

新建对象 lay_日期({
	[lay_日期.配置.绑定元素]: "#演示4",
	[lay_日期.配置.类型]: lay_日期.类型.时间,
});
JavaScript

代码效果展示:

日期时间选择器代码示例:

新建对象 lay_日期({
	[lay_日期.配置.绑定元素]: "#演示5",
	[lay_日期.配置.类型]: lay_日期.类型.日期时间,
});
JavaScript

代码效果展示:

所有选择器类型都支持范围选择, 日期时间范围选择器代码示例:

新建对象 lay_日期({
	[lay_日期.配置.绑定元素]: "#演示10",
	[lay_日期.配置.类型]: lay_日期.类型.日期时间,
	[lay_日期.配置.范围]: 真,
});
JavaScript

代码效果展示:

 自定义格式:在设置格式前,需要先了解以下格式支持:

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

了解了这些,我们就可以根据这些格式符自由搭配。例如:

新建对象 lay_日期({
	[lay_日期.配置.绑定元素]: "#演示16",
	[lay_日期.配置.类型]: lay_日期.类型.日期时间,
	[lay_日期.配置.范围]: "到",
	[lay_日期.配置.格式]: "yyyy年M月d日H时m分s秒",
});
新建对象 lay_日期({
	[lay_日期.配置.绑定元素]: "#演示13",
	[lay_日期.配置.格式]: "一篇yyyy-MM-dd的日记",
});

点击此处跳转案例下载:点击下载日期和时间组件实例

 

 

33-快码FOF中文编程layui教学-组件:日期和时间组件