laydate介绍
- 背景介绍
laydate主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。内置强劲的自定义日期格式解析和合法校正机制,含中文版和国际版,主题简约却又不失灵活多样。由于内部采用的是零依赖的原生 JavaScript 编写,因此又可作为独立组件使用。毫无疑问,这是 layui 的虔心之作。 - 基本用法
获得 layDate 文件包后,解压并将 laydate 整个文件夹(不要拆分结构) 存放到项目的任意目录,使用时,只需引入 laydate.js 即可。
下载网址为:https://www.layui.com/
以下代码日期控件格式为中文版的yyyy-mm-dd。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layDate基本用法</title>
</head>
<body>
<input type="text" id="test">
<script src="/laydate/laydate.js"></script> <!-- 改成对应路径导入laydate.js文件 -->
<script>
laydate.render({
elem: '#test'
});
</script>
</body>
</html>
- 主要用法之英文版的yyyy-mm-dd,只需将javascript中执行的laydate实例中对应的lang属性设置为’en’,即显示的日期控件为英文格式。
<script>
laydate.render({
elem: '#test'
,lang: 'en'
});
</script>
- 主要用法之年选择器,只需将javascript中laydate实例中type属性设置成’year’即可。与之同原理,年月选择器的type属性为’month’;时间选择器的type属性为’time’;日期时间选择器的type属性为’datetime’
laydate.render({
elem: '#test'
,type: 'year'
});
- 主要用法之日期范围选择;与此同理,若为年范围,则先将type设置为’year’,再将range设置为’true’;年月范围,则先将type设置为’month’,再将range设置为’true’;时间范围,则先将type设置为’time’,再将range设置为’true’;日期时间范围,则先将type设置为’datetime’,再将range设置为’true’;
laydate.render({
elem: '#test'
,range: true
});
- 主要用法之自定义格式yyyy年MM月dd日;若所需其他的格式,则只需将format属性设置成所需的格式。
laydate.render({
elem: '#test'
,format: 'yyyy年MM月dd日'
});
laydate.render({
elem: '#test'
,type: 'datetime'
,range: '到'
,format: 'yyyy年M月d日H时m分s秒'
});
laydate.render({
elem: '#test'
,calendar: true
});
laydate.render({
elem: '#test'
,mark: {
'0-10-14': '生日'
,'0-12-31': '跨年'
,'0-0-10': '工资'
,'0-0-15': '月中'
,'2017-8-15': ''
,'2099-10-14': '呵呵'
}
,done: function(value, date){
if(date.year === 2017 && date.month === 8 && date.date === 15){
alert('这一天是:中国人民抗日战争胜利72周年');
}
}
});
var ins22 = laydate.render({
elem: '#test-limit1'
,min: '2016-10-14'
,max: '2080-10-14'
,ready: function(){
ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
}
});
laydate.render({
elem: '#test-limit2'
,min: -7
,max: 7
});
laydate.render({
elem: '#test-limit3'
,type: 'time'
,min: '09:30:00'
,max: '17:30:00'
,btns: ['clear', 'confirm']
});
- 更多内容可链接网址https://www.layui.com/doc/modules/laydate.html
最后推荐一个公众号,一枚IT技术人成长路上关于生活和职场的思考,欢迎书友们前来交流和分享心得
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/69a31e49182349d353f4493d5713d22b.jpeg)