1. layDate其中主要以: 年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心, 并且均支持范围选择(即双控件)。内置强劲的自定义日期格式解析和合法校正机制, 含中文版和国际版, 主题简约却又不失灵活多样。由于内部采用的是零依赖的原生JavaScript编写, 因此又可作为独立组件使用。
2. 模块加载名称: laydate。
3. 基础参数选项
3.1. 通过核心方法: laydate.render(options)来设置基础参数。也可以通过方法: laydate.set(options)来设定全局基础参数。
4. elem - 绑定元素
4.1. 类型: String/DOM, 默认值: 无。
4.2. 必填项, 用于绑定执行日期渲染的元素, 值一般为选择器或DOM对象。
5. 作为独立组件使用
5.1. 下载layDate独立版本组件包:
5.2. 引入laydate.js之后即可调用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用layDate独立版</title>
</head>
<body>
<input type="text" placeholder="请选择日期" id="test1">
<script type="text/javascript" src="layDate-v5.0.9/laydate/laydate.js"></script>
<script type="text/javascript">
// 执行一个laydate实例
laydate.render({
elem: '#test1' // 指定元素
});
</script>
</body>
</html>5.3. 效果图
6. type - 控件选择类型
6.1. 类型: String, 默认值: date。
6.2. 用于单独提供不同的选择器类型, 可选值如下表:
6.3. 实例
<script type="text/javascript">
layui.use('laydate', function(){
var laydate = layui.laydate;
// 年选择器
laydate.render({
elem: '#test1'
,type: 'year'
});
// 年月选择器
laydate.render({
elem: '#test2'
,type: 'month'
});
// 日期选择器
laydate.render({
elem: '#test3'
,type: 'date' // 默认, 可不填
});
// 时间选择器
laydate.render({
elem: '#test4'
,type: 'time'
});
// 日期时间选择器
laydate.render({
elem: '#test5'
,type: 'datetime'
});
});
</script>7. range - 开启左右面板范围选择
7.1. 类型: Boolean/String, 默认值: false。
7.2. 如果设置true, 将默认采用"-"分割。你也可以直接设置分割字符。五种选择器类型均支持左右面板的范围选择。
<script type="text/javascript">
layui.use('laydate', function(){
var laydate = layui.laydate;
// 年范围选择器
laydate.render({
elem: '#test6'
,type: 'year'
,range: true
});
// 年月范围选择器
laydate.render({
elem: '#test7'
,type: 'month'
,range: '~'
});
// 日期范围选择器
laydate.render({
elem: '#test8'
,type: 'date' // 默认, 可不填
,range: '~'
});
// 时间范围选择器
laydate.render({
elem: '#test9'
,type: 'time'
,range: true
});
// 日期时间范围选择器
laydate.render({
elem: '#test10'
,type: 'datetime'
,range: '~'
});
});
</script>8. format - 自定义格式
8.1. 类型: String, 默认值: yyyy-MM-dd。
8.2. 通过日期时间各自的格式符和长度, 来设定一个你所需要的日期格式。layDate支持的格式如下:
8.3. 通过上述不同的格式符组合成一段日期时间字符串, 可任意排版, 如下所示:
8.4. 实例
<script type="text/javascript">
layui.use('laydate', function(){
var laydate = layui.laydate;
// 年格式化
laydate.render({
elem: '#test11'
,type: 'year'
,format: 'yyyy年'
});
// 年月格式化
laydate.render({
elem: '#test12'
,type: 'month'
,format: 'yyyy年MM月'
});
// 日期格式化
laydate.render({
elem: '#test13'
,type: 'date' // 默认, 可不填
,format: 'yyyy年MM月dd日'
});
// 时间格式化
laydate.render({
elem: '#test14'
,type: 'time'
,format: '北京时间: HH时mm分ss秒'
});
// 日期时间格式化
laydate.render({
elem: '#test15'
,type: 'datetime'
,format: 'yyyy年MM月dd日 HH时mm分ss秒'
});
});
</script>9. value - 初始值
9.1. 类型: String, 默认值: new Date()。
9.2. 支持传入符合format参数设定的日期格式字符, 或者new Date()。
10. isInitValue - 初始值填充
10.1. 类型: Boolean, 默认值: true。
10.2. 用于控制是否自动向元素填充初始值(需配合value参数使用)。
11. min/max - 最小/大范围内的日期时间值
11.1. 类型: string, 默认值: min: '1900-1-1'、max: '2099-12-31'。
11.2. 设定有限范围内的日期或时间值, 不在范围内的将不可选中。这两个参数的赋值非常灵活, 主要有以下几种情况:
12. trigger - 自定义弹出控件的事件
12.1. 类型: String, 默认值: focus。
12.2. 如果绑定的元素非输入框, 则默认事件为: click。
13. show - 默认显示
13.1. 类型: Boolean, 默认值: false。
13.2. 如果设置: true, 则控件默认显示在绑定元素的区域。通常用于外部事件调用控件。
14. position - 定位方式
14.1. 类型: String, 默认值: absolute。
14.2. 用于设定控件的定位方式, 有以下三种可选值:
15. zIndex - 层叠顺序
15.1. 类型: Number, 默认值: 66666666。
15.2. 一般用于解决与其它元素的互相被遮掩的问题。如果position参数设为static时, 该参数无效。
16. showBottom - 是否显示底部栏
16.1. 类型: Boolean, 默认值: true。
16.2. 如果设置false, 将不会显示控件的底部栏区域。
17. btns - 工具按钮
17.1. 类型: Array, 默认值: ['clear', 'now', 'confirm']。
17.2. 右下角显示的按钮, 会按照数组顺序排列, 内置可识别的值有: clear、now、confirm。
18. lang - 语言
18.1. 类型: String, 默认值: cn。
18.2. 我们内置了两种语言版本: cn(中文版)、en(国际版, 即英文版)。
19. theme - 主题
19.1. 类型: String, 默认值: default。
19.2. theme的可选值有: default(默认简约)、molv(墨绿背景)、grid(格子主题)。
19.3. 另外, 你还可以传入其它字符, 如: theme: 'xxx', 那么控件将会多出一个class="laydate-theme-xxx"的CSS类, 以便于你单独定制主题。
20. calendar - 是否显示公历节日
20.1. 类型: Boolean, 默认值: false。
20.2. layui内置了一些我国通用的公历重要节日, 通过设置true来开启。国际版不会显示。
21. mark - 标注重要日子
21.1. 类型: Object, 默认值: 无。
21.2. calendar参数所代表的公历节日更多情况下是一个摆设。因此, 我们还需要自定义标注重要日子, 比如: 结婚纪念日?日程表等?它分为以下两种:
22. 控件初始打开的回调-ready
22.1. 控件在打开时触发, 回调返回一个参数: 初始的日期时间对象。
ready: function(date){
console.log(date);
}23. 日期时间被切换后的回调-change
23.1. 年月日时间被切换时都会触发。回调返回三个参数, 分别代表: 生成的值、日期时间对象、结束的日期时间对象。
change: function(value, date, endDate){
console.log(value, date, endDate);
}24. 控件选择完毕后的回调-done
24.1. 点击日期、清空、现在、确定均会触发。回调返回三个参数, 分别代表: 生成的值、日期时间对象、结束的日期时间对象。
done: function(value, date, endDate){
console.log(value, date, endDate);
}25. 弹出控件提示
25.1. 事实上, 执行核心方法laydate.render(options)会返回一个当前实例对象。其中包含一些成员属性和方法, 比如: hint方法。
var ins = laydate.render({
elem: '#test21'
,type: 'datetime'
,change: function(value, date, endDate){
ins.hint(value); // 在控件上弹出value值
console.log(value, date, endDate);
}
});26. 其它方法
27. 例子
27.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日期模块 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<big>年选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test1">
</div>
<big>年月选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test2">
</div>
<big>日期选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test3">
</div>
<big>时间选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test4">
</div>
<big>日期时间选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test5">
</div>
<br /><br />
<big>年范围选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test6">
</div>
<big>年月范围选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test7">
</div>
<big>日期范围选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test8">
</div>
<big>时间范围选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test9">
</div>
<big>日期时间范围选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test10">
</div>
<br /><br />
<big>年格式化:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test11">
</div>
<big>年月格式化:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test12">
</div>
<big>日期格式化:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test13">
</div>
<big>时间格式化:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test14">
</div>
<big>日期时间格式化:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test15">
</div>
<br /><br />
<big>墨绿主题:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test16">
</div>
<big>自定义颜色背景:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test17">
</div>
<big>格子主题:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test18">
</div>
<br /><br />
<big>定位fixed:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test19">
</div>
<br /><br />
<h2>直接嵌套在指定容器中:</h2>
<div class="layui-block" id="test20"></div>
<br /><br />
<big>标注重要日子:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test21">
</div>
<br /><br />
<h2>获取某年某月的最后一天:</h2>
<div style="width: 300px; height: 100px; background: pink;" class="layui-inline" id="test22"></div>
<br /><br />
<h2>获取当前年某月的最后一天:</h2>
<div style="width: 300px; height: 200px; background: green;" class="layui-inline" id="test23"></div>
<script type="text/javascript">
layui.use(['laydate', 'jquery'], function(){
var laydate = layui.laydate
,$ = layui.jquery;
// 年选择器
laydate.render({
elem: '#test1'
,type: 'year'
});
// 年月选择器
laydate.render({
elem: '#test2'
,type: 'month'
});
// 日期选择器
laydate.render({
elem: '#test3'
,type: 'date' // 默认, 可不填
,min: -7
,max: 7
});
// 时间选择器
laydate.render({
elem: '#test4'
,type: 'time'
});
// 日期时间选择器
laydate.render({
elem: '#test5'
,type: 'datetime'
,min: '2021-1-1 00:00:00'
,max: '2021-12-31 23:59:59'
});
// 年范围选择器
laydate.render({
elem: '#test6'
,type: 'year'
,range: true
});
// 年月范围选择器
laydate.render({
elem: '#test7'
,type: 'month'
,range: '~'
});
// 日期范围选择器
laydate.render({
elem: '#test8'
,type: 'date' // 默认, 可不填
,range: '~'
,min: (new Date()).getTime() - 86400000 * 10
,max: (new Date()).getTime() + 86400000 * 10
});
// 时间范围选择器
laydate.render({
elem: '#test9'
,type: 'time'
,range: true
});
// 日期时间范围选择器
laydate.render({
elem: '#test10'
,type: 'datetime'
,range: '~'
});
// 年格式化
laydate.render({
elem: '#test11'
,type: 'year'
,format: 'yyyy年'
,value: new Date()
,isInitValue: true
});
// 年月格式化
laydate.render({
elem: '#test12'
,type: 'month'
,format: 'yyyy年MM月'
,value: new Date()
,isInitValue: true
});
// 日期格式化
laydate.render({
elem: '#test13'
,type: 'date' // 默认, 可不填
,format: 'yyyy年MM月dd日'
,value: new Date()
,isInitValue: true
});
// 时间格式化
laydate.render({
elem: '#test14'
,type: 'time'
,format: '北京时间: HH时mm分ss秒'
,value: new Date()
,isInitValue: true
});
// 日期时间格式化
laydate.render({
elem: '#test15'
,type: 'datetime'
,format: 'yyyy年MM月dd日 HH时mm分ss秒'
,value: new Date()
,isInitValue: true
});
// 墨绿主题
laydate.render({
elem: '#test16'
,type: 'year'
,theme: 'molv'
,lang: 'en'
,trigger: 'focus'
});
// 自定义颜色背景
laydate.render({
elem: '#test17'
,type: 'month'
,theme: '#393D49'
,lang: 'en'
,showBottom: false
});
// 格子主题
laydate.render({
elem: '#test18'
,type: 'date' // 默认, 可不填
,theme: 'grid'
,lang: 'en'
,showBottom: false
});
laydate.render({
elem: '#test19'
,type: 'time'
,position: 'fixed'
});
// 直接嵌套在指定容器中
laydate.render({
elem: '#test20'
,type: 'datetime'
,position: 'static'
,calendar: true
});
// 标记重要日子
var ins = laydate.render({
elem: '#test21'
,type: 'datetime'
,mark: {
'0-8-15': '中秋节' // 0即代表每一年
,'0-0-28': '爬山' // 0-0即代表每年每月
,'2020-1-1': '结婚'
}
,ready: function(date){
console.log(date);
}
,change: function(value, date, endDate){
ins.hint(value); // 在控件上弹出value值
console.log(value, date, endDate);
}
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
});
$('#test22').text('今年2月有' + laydate.getEndDate(2) + '天');
$('#test23').text('2020年2月有' + laydate.getEndDate(2, 2020) + '天');
});
</script>
</body>
</html>27.2. 效果图
