android 双日历控件,又来给大家分享双日历控件 这次是基于Layui

本帖最后由 三爷 于 2020-9-7 10:24 编辑

上一篇分享了一个双日历控件是基于bootstrap 的今日分享的这个是基于Layui的

网上看了一下这一块的文章很少，而且有的根本不能使用，说的很抽象

先上效果图

image.png (27.87 KB, 下载次数: 0)

2020-9-7 09:57 上传

底部的时间是可以根据自己的需求控制的

第一步 去Layui的官网去下载

image.png (397.53 KB, 下载次数: 0)

2020-9-7 09:59 上传

第二步 找到laydate.js文件

在文件里面搜索  confirm:"确定",clear:"清空",now:"现在"

image.png (291.34 KB, 下载次数: 0)

2020-9-7 10:01 上传

定义自己想要的时间参数

image.png (90.51 KB, 下载次数: 0)

2020-9-7 10:03 上传

html代码

先引入layui的css 和js文件

[HTML] 纯文本查看 复制代码

请选择范围

在script中加入

[JavaScript] 纯文本查看 复制代码laydate.render({

elem: '#test16'

, type: 'datetime'

, range: true

, format: 'yyyy-MM-dd HH:mm:ss'

, btns: ['now', 'day', 'yesterday', 'lastday7', 'lastday30', 'week', 'lastweek', 'month', 'lastmonth', 'confirm', 'clear'],

ready: function (date) {

}

});

这里将js文件中定义的参数名和这里保持一致 不然不会显示

image.png (119.22 KB, 下载次数: 0)

2020-9-7 10:08 上传

layui 会默认给按钮加上class样式

image.png (112.78 KB, 下载次数: 0)

2020-9-7 10:10 上传

下一步在ready这个方法中来完成你的单击事件操作

image.png (111.15 KB, 下载次数: 0)

2020-9-7 10:11 上传

https://wwe.lanzous.com/iZnlPgey0nc