学习layer和laydate的官方文档

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

学习layer和laydate的官⽅⽂档
layer是⼀个Web弹窗组件，laydate是⼀个⽇期和时间组件。

⼆者都是layui的组件。

layer的官⽅⽂档：
/doc/modules/layer.html/，laydate的官⽅⽂档：/doc/modules/laydate.html，layer 可以独⽴使⽤，也可以通过layui模块化使⽤。

具体使⽤参考layer的官⽅⽂档。

⼀、学习layer中常⽤的基础参数
⼀般在调⽤layer的open或msg⽅法时⽤到的基础参数（配置项）如：layer.open({content : ' '}),layer.msg({' ' , time : 3})等。

layer提供了5中层类型：0（信息框），1（页⾯层），2（iframe层），3（加载层），4（tips层）。

默认是
0，layer.open({type : 2})，这样的描述⽅式可以改变层类型。

layer的标题：layer.open({title : false})表⽰没有标题，layer.open({title : '班级信息'})表⽰标题，layer.open({title : ['班级信息',font-size:18px;]})表⽰标题可以添加任意CSS样式。

layer的内容：content可以传HTML页⾯，可以指定DOM，更可以随着type的不同⽽不同。

官⽅⽂档的⽰例如下。

//页⾯层
1. layer.open({
2. type: 1,
3. content: '传⼊任意的⽂本或html' //这⾥content是⼀个普通的String
4. });
1. layer.open({
2. type: 1,
3. content: $('#id') //这⾥content是⼀个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
4. });
//Ajax获取
1. $.post('url', {}, function(str){
2. layer.open({
3. type: 1,
4. content: str //注意，如果str是object，那么需要字符拼接。

5. });
6. });
//iframe层
1. layer.open({
2. type: 2,
3. content: '' //这⾥content是⼀个URL，如果你不想让iframe出现滚动条，你还可以content: ['', 'no']
4. });
//tips层
1. layer.open({
2. type: 4,
3. content: ['内容', '#id'] //数组第⼆项即吸附元素选择器或者DOM
4. });
layer的宽⾼：默认情况下宽⾼是⾃适应的，只定义宽度如area : '500px'，⾼度依然是⾃适应的。

宽⾼都定义如area : ['500px','300px']。

layer默认的坐标是垂直⽔平居中。

layer的层弹出成功后的回调⽅法success：当需要在层创建完毕时即执⾏⼀些语句，可以通过该回调。

success会携带两个参数分别是当前层的DOM和当前层的索引。

官⽅⽂档⽰例如下。

1. layer.open({
2. content: '测试回调',
3. success: function(layero, index){
4. console.log(layero, index);
5. }
6. });
layer的原始核⼼⽅法open：所有创建层的⽅式都是layer.open({options})，创建任何类型的层都会返回当前层索引
index,index是layer.close()等⽅法的必传参数，options是基础参数.
layer的提⽰框：layer.msg(content,options,end)，⼀般3s后⾃动消失。

官⽅⽂档⽰例如下。

1. //eg1
2. layer.msg('只想弱弱提⽰');
3. //eg2
4. layer.msg('有表情地提⽰', {icon: 6});
5. //eg3
6. layer.msg('关闭后想做些什么', function(){
7. //do something
8. });
9. //eg
10. layer.msg('同上', {
11. icon: 1,
12. time: 2000 //2秒关闭（如果不配置，默认是3秒）
13. }, function(){
14. //do something
15. });
⼆、学习laydate中常⽤的时间控件
在layui模块中使⽤，官⽅⽂档⽰例如下。

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>layDate快速使⽤</title>
6. <link rel="stylesheet" href="/static/build/layui.css" media="all">
7. </head>
8. <body>
9.
10. <div class="layui-inline"> 
11. <input type="text" class="layui-input" id="test1">
12. </div>
13.
14. <script src="/static/build/layui.js"></script>
15. <script>
16. e('laydate', function(){
17. var laydate = ydate;
18.
19. //执⾏⼀个laydate实例
20. laydate.render({
21. elem: '#test1' //指定元素
22. });
23. });
24. </script>
25. </body>
26. </html>
作为独⽴组件使⽤，官⽅⽂档如下。

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>使⽤ layDate 独⽴版</title>
6. </head>
7. <body>
8.
9. <input type="text" id="test1">
10.
11. <script src="laydate.js"></script>
12. <script>
13. //执⾏⼀个laydate实例
14. laydate.render({
15. elem: '#test1' //指定元素
16. });
17. </script>
18. </body>
19. </html>
laydate的绑定元素：⽤于绑定⽇期渲染的元素，值⼀般为选择器或DOM对象，官⽅⽂档⽰例如下。

1. laydate.render({
2. elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
3. });
laydate的时间选择类型：⽤于提供不同的选择器类型。

官⽅⽂档⽰例如下。

1. //年选择器，只提供年列表选择
2. laydate.render({
3. elem: '#test'
4. ,type: 'year'
5. });
6.
7. //年⽉选择器，只提供年、⽉选择
8. laydate.render({
9. elem: '#test'
10. ,type: 'month'
11. });
12.
13. //⽇期选择器，可选择：年、⽉、⽇。

type默认值，⼀般可不填
14. laydate.render({
15. elem: '#test'
16. //,type: 'date' //默认，可不填
17. });
18.
19. //时间选择器，只提供时分秒
20. laydate.render({
21. elem: '#test'
22. ,type: 'time'
23. });
24.
25. //⽇期时间选择器，可选择：年、⽉、⽇、时、分、秒
26. laydate.render({
27. elem: '#test'
28. ,type: 'datetime'
29. });
laydate的开启左右⾯板范围选择：默认是false，改为true则⽤“-”分割，也可⾃定义分割字符。

五种类型的时间选择器都⽀持左右⾯板，将基础参数添加range : true或者⾃定义range : '~'。

laydate的⽇期时间⾃定义格式：通过不同格式符可以组合成⼀段⽇期时间字符串。

yyyy年份，⾄少四位数。

如果不⾜四位，则前⾯补零
y年份，不限制位数，即不管年份多少位，前⾯均不补零
MM⽉份，⾄少两位数。

如果不⾜两位，则前⾯补零。

M⽉份，允许⼀位数。

dd⽇期，⾄少两位数。

如果不⾜两位，则前⾯补零。

d⽇期，允许⼀位数。

HH⼩时，⾄少两位数。

如果不⾜两位，则前⾯补零。

H⼩时，允许⼀位数。

mm分钟，⾄少两位数。

如果不⾜两位，则前⾯补零。

m分钟，允许⼀位数。

ss秒数，⾄少两位数。

如果不⾜两位，则前⾯补零。

s秒数，允许⼀位数。

yyyy-MM-dd HH:mm:ss2017-08-18 20:08:08
yyyy年MM⽉dd⽇ HH时mm分ss秒2017年08⽉18⽇ 20时08分08秒
yyyyMMdd20170818
dd/MM/yyyy18/08/2017
yyyy年M⽉2017年8⽉
M⽉d⽇8⽉18⽇
北京时间：HH点mm分北京时间：20点08分
yyyy年的M⽉某天晚上，⼤概H点2017年的8⽉某天晚上，⼤概20点
1. //⾃定义⽇期格式
2. laydate.render({
3. elem: '#test'
4. ,format: 'yyyy年MM⽉dd⽇' //可任意组合
5. });
laydate的初始值：⽀持符合format参数设定的⽇期格式，或New Date()。

官⽅⽂档⽰例如下。

1. //传⼊符合format格式的字符给初始值
2. laydate.render({
3. elem: '#test'
4. ,value: '2018-08-18' //必须遵循format参数设定的格式
5. });
6.
7. //传⼊Date对象给初始值
8. laydate.render({
9. elem: '#test'
10. ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
11. });
laydate的初始值填充：⽤于控制是否⾃动向元素填充初始值。

需配合value参数使⽤，官⽅⽂档⽰例如下。

1. laydate.render({
2. elem: '#test'
3. ,value: '2017-09-10'
4. ,isInitValue: false //是否允许填充初始值，默认为 true
5. });
laydate的最⼤/最⼩范围内的⽇期时间值：设定有限范围的⽇期或者时间值，不再范围内的将不可选中。

官⽅⽂档⽰例如下。

1.如果值为字符类型，则：年⽉⽇必须⽤ -（中划线）分割、时分秒必须⽤ :（半⾓冒号）号分割。

这⾥并⾮遵循 format 设定的格式
2.如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最⼩⽇期在7天前，正数代表若⼲天后
3.如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最⼤⽇期在：公元3000年1⽉1⽇
1. //⽇期有效范围只限定在：2017年
2. laydate.render({
3. elem: '#test'
4. ,min: '2017-1-1'
5. ,max: '2017-12-31'
6. });
7.
8. //⽇期有效范围限定在：过去⼀周到未来⼀周
9. laydate.render({
10. elem: '#test'
11. ,min: -7 //7天前
12. ,max: 7 //7天后
13. });
14.
15. //⽇期时间有效范围的设定:
16. laydate.render({
17. elem: '#test'
18. ,type: 'datetime'
position 可选值
说明abolute
绝对定位，始终吸附在绑定元素周围。

默认值fixed
固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。

⼀般⽤于在固定定位的弹层中使⽤。

static 静态定位，控件将直接嵌套在指定容器中。

注意：请勿与 show 参数的概念搞混淆。

show 为 true 时，控件仍然是采⽤绝对或固定定位。

⽽这⾥是直接嵌套显⽰19. ,min: '2017-8-11 12:30:00'
20. ,max: '2017-8-18 12:30:00'
21. });
22.
23. //时间有效范围设定在: 上午九点半到下午五点半
24. laydate.render({
25. elem: '#test'
26. ,type: 'time'
27. ,min: '09:30:00'
28. ,max: '17:30:00'
29. });
laydate ⾃定义弹出控件事件：如果绑定事件⾮输⼊框，默认事件为click 。

官⽅⽂档⽰例如下。

1. //⾃定义事件
2. laydate.render({
3. elem: '#test'
4. ,trigger: 'click' //采⽤click 弹出
5. });
laydate 定位⽅式：定位⽅式有三种。

laydate 显⽰底部栏：默认显⽰底部栏。

设置为false 则不显⽰。

官⽅⽂档⽰例如下。

1. //不显⽰底部栏
2. laydate.render({
3. elem: '#test'
4. ,showBottom: false
5. });
laydate 初始打开的回调：初始的⽇期时间对象。

官⽅⽂档⽰例如下。

1. laydate.render({
2. elem: '#test'
3. ,ready: function(date){
4. console.log(date); //得到初始的⽇期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
5. }
6. });
laydate ⽇期时间被切换后的回调：毁掉返回三个参数，分别是⽣成的值，⽇期时间对象，结束的⽇期时间对象。

官⽅⽂档⽰例如下。

1. laydate.render({
2. elem: '#test'
3. ,change: function(value, date, endDate){
4. console.log(value); //得到⽇期⽣成的值，如：2017-08-18
5. console.log(date); //得到⽇期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
6. console.log(endDate); //得结束的⽇期时间对象，开启范围选择（range: true ）才会返回。

对象成员同上。

7. }
8. });
laydate 控件选择完毕后的回调：点击⽇期，清空，现在，确定均会触发。

返回三个参数，⽣成的值，⽇期时间对象，结束的⽇期时间对象。

官⽅⽂档⽰例如下。

1. laydate.render({
2. elem: '#test'
3. ,done: function(value, date, endDate){
4. console.log(value); //得到⽇期⽣成的值，如：2017-08-18
5. console.log(date); //得到⽇期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
6. console.log(endDate); //得结束的⽇期时间对象，开启范围选择（range: true ）才会返回。

对象成员同上。

7. }
8. });
三、结束语
layer和laydate作为前端组件，使⽤时在项⽬中引⽤对应的js或css⽂件，就可以作为独⽴组件使⽤，这样能满⾜管理系统中对弹出层和时间展⽰和操作。