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实例
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){ //点击2017年8月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');
}
});
- 主要用法之前后若干天可选
//前后若干天可选,这里以7天为例
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技术人成长路上关于生活和职场的思考,欢迎书友们前来交流和分享心得
版权声明:本文为fq_fly原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。