码迷，mamicode.com
首页 > 其他好文 > 详细

学习layer和laydate的官方文档

时间：2018-07-23 19:55:29      阅读：2315      评论：0      收藏：0      [点我收藏+]

标签：北京时间   head   dom   方法   格式   组合   添加   支持   数组   

　　layer是一个Web弹窗组件，laydate是一个日期和时间组件。二者都是layui的组件。layer的官方文档：http://www.layui.com/doc/modules/layer.html/，laydate的官方文档：http://www.layui.com/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: ‘http://sentsin.com‘ //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: [‘http://sentsin.com‘, ‘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>
  10. <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  11. <input type="text" class="layui-input" id="test1">
  12. </div>
  14. <script src="/static/build/layui.js"></script>
  15. <script>
  16. layui.use(‘laydate‘, function(){
  17. var laydate = layui.laydate;
  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>
  9. <input type="text" id="test1">
  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. });
  7. //年月选择器，只提供年、月选择
  8. laydate.render({
  9. elem: ‘#test‘
  10. ,type: ‘month‘
  11. });
  13. //日期选择器，可选择：年、月、日。type默认值，一般可不填
  14. laydate.render({
  15. elem: ‘#test‘
  16. //,type: ‘date‘ //默认，可不填
  17. });
  19. //时间选择器，只提供时分秒
  20. laydate.render({
  21. elem: ‘#test‘
  22. ,type: ‘time‘
  23. });
  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:ss 2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒 2017年08月18日 20时08分08秒
yyyyMMdd 20170818
dd/MM/yyyy 18/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. });
  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. });
  8. //日期有效范围限定在：过去一周到未来一周
  9. laydate.render({
  10. elem: ‘#test‘
  11. ,min: -7 //7天前
  12. ,max: 7 //7天后
  13. });
  15. //日期时间有效范围的设定:
  16. laydate.render({
  17. elem: ‘#test‘
  18. ,type: ‘datetime‘
  19. ,min: ‘2017-8-11 12:30:00‘
  20. ,max: ‘2017-8-18 12:30:00‘
  21. });
  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定位方式：定位方式有三种。

position 可选值说明
abolute 绝对定位，始终吸附在绑定元素周围。默认值
fixed 固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。
static 静态定位，控件将直接嵌套在指定容器中。 
注意：请勿与 show 参数的概念搞混淆。show为 true 时，控件仍然是采用绝对或固定定位。而这里是直接嵌套显示

 

 

 

 

　　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文件，就可以作为独立组件使用，这样能满足管理系统中对弹出层和时间展示和操作。

 

学习layer和laydate的官方文档

标签：北京时间   head   dom   方法   格式   组合   添加   支持   数组   

原文地址：https://www.cnblogs.com/senleyumi/p/9356022.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！