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

三爷

上一篇分享了一个双日历控件是基于bootstrap 的今日分享的这个是基于Layui的
网上看了一下这一块的文章很少，而且有的根本不能使用，说的很抽象
先上效果图



底部的时间是可以根据自己的需求控制的
第一步 去Layui的官网去下载



第二步 找到laydate.js文件
在文件里面搜索  confirm:"确定",clear:"清空",now:"现在"



定义自己想要的时间参数



html代码
先引入layui的css 和js文件

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

<div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">请选择范围</label>
            <div class="layui-input-inline" style="width: 300px;">
                <input type="text" class="layui-input" id="test16" placeholder="开始日期 到 结束日期">
            </div>
        </div>
    </div>

在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文件中定义的参数名和这里保持一致 不然不会显示

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

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


https://wwe.lanzouj.com/iZnlPgey0nc

三爷

sharki1987 发表于 2020-9-7 10:58
element-ui的挺好用的啊。可自定义时间范围

layui 也是可以自定义时间范围，这个我有空也去研究一下 谢谢

青袂婉约

感谢分享！

kasdkk

感谢分享，支持一下。

yan0422

谢谢分享，学习一下

sharki1987

element-ui的挺好用的啊。可自定义时间范围

gunxsword

感谢分享!

jk3002

谢谢楼主分享蛮好用的

zanaa007

谢谢楼主分享的日历

吾爱今朝

谢谢分享 学习