laydate 自定义bootstrap皮肤及控件封装

最新推荐文章于 2023-04-23 16:19:36 发布
最新推荐文章于 2023-04-23 16:19:36 发布
阅读量742 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 日积月累 文章标签： laydate bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liuminglei1987/article/details/94567844
本文介绍了一种laydate插件的自定义Bootstrap主题，使日期选择器与Bootstrap风格的UI无缝对接，提供了丰富的日期操作功能，包括日期、时间、年月等不同类型的输入，并支持时间范围、节假日标记、自定义格式等功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

主题

得益于laydate的强大，可以很方便的进行日期操作。但是，自带样式和主题与采用bootstrap风格的UI不太协调，遂自己写了一套bootstrap版的主题，与bootstrap风格的UI完美兼容。

效果图

控件

用法

<div class="form-horizontal">
    <div class="row">
        <div class="col-sm-12">
            <div class="section-title">
                <h3>基础</h3>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="section-content">
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月日：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="date" value="2018-08-08" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">年月日时分秒：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="datetime" value="2018-08-08 12:00:00" class="form-control" placeholder="时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">时分秒：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="time" value="12:00:00" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">年：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="year" value="2019" class="form-control" placeholder="时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="month" value="2019-06" class="form-control" placeholder="时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">默认当前日期：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="date" value="" data-date-now="true" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">不默认当前日期：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="date" value="" class="form-control" placeholder="时间">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="section-title">
                <h3>时间范围</h3>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="section-content">
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月日：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="date" data-date-range="true" value="2019-06-08 - 2019-07-08" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">年月日时分秒：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="datetime" data-date-range="true" value="2019-06-08 12:00:00 - 2019-07-08 12:00:00" class="form-control" placeholder="时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">时分秒：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="time" data-date-range="true" value="12:00:00 - 17:00:00" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">年：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="year" data-date-range="true" value="2019 - 2025" class="form-control" placeholder="时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="month" data-date-range="true" value="2019-06 - 2019-10" class="form-control" placeholder="时间">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="section-title">
                <h3>公立节假日</h3>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="section-content">
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月日：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" placeholder="时间" data-toggle="laydate" data-date-type="date" value="2019-06-08" data-date-holiday="true">
                    </div>
                    <label class="col-sm-2 control-label">年月日时分秒：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" placeholder="时间" data-toggle="laydate" data-date-type="datetime" value="2019-08-08 12:00:00" data-date-holiday="true">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="section-title">
                <h3>自定义重要日期</h3>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="section-content">
                <div class="form-group">
                    <label class="col-sm-2 control-label">每年日期：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" placeholder="时间" data-toggle="laydate" data-date-type="date" value="2019-06-08" data-date-holiday="true" data-date-day='{"0-9-8":"国耻"}'>
                    </div>
                    <label class="col-sm-2 control-label">每月日期：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" placeholder="时间" data-toggle="laydate" data-date-type="datetime" value="2019-09-08 12:00:00" data-date-holiday="true" data-date-day='{"0-0-15":"中旬"}'>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">特定日期：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" placeholder="时间" data-toggle="laydate" data-date-type="date" value="2019-06-08" data-date-holiday="true" data-date-day='{"2019-7-21":"会议"}'>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="section-title">
                <h3>最小/大范围</h3>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="section-content">
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月日（前后N天）：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="date" data-date-min="-7" data-date-max="7" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">年月日时分秒（前后N天）：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="datetime" data-date-min="-7" data-date-max="7" class="form-control" placeholder="时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月日（具体某天）：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="date" data-date-min="2019-05-05" data-date-max="2020-08-08" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">年月日时分秒（具体某天）：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="datetime" data-date-min="2019-05-05" data-date-max="2020-08-08" class="form-control" placeholder="时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月日（混合使用）：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="date" data-date-min="-7" data-date-max="2020-08-08" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">年月日时分秒（混合使用）：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="datetime" data-date-min="2019-05-05" data-date-max="7" class="form-control" placeholder="时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">时分秒：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="time" value="12:00:00" data-date-min="8:30:00" data-date-max="17:30:00" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">年：</label>
                    <div class="col-sm-4">
                        <p class="form-control-static">不支持</p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月：</label>
                    <div class="col-sm-4">
                        <p class="form-control-static">不支持</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="section-title">
                <h3>自定义格式</h3>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="section-content">
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月日：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="date" value="2018/08/08" data-date-format="yyyy/MM/dd" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">年月日时分秒：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="datetime" value="2018/08/08 12:00:00" data-date-format="yyyy/MM/dd HH:mm:ss" class="form-control" placeholder="时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">时分秒：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="time" value="12时00分00秒" data-date-format="HH时mm分ss秒" class="form-control" placeholder="时间">
                    </div>
                    <label class="col-sm-2 control-label">年：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="year" value="2019年" data-date-format="yyyy年" class="form-control" placeholder="时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">年月：</label>
                    <div class="col-sm-4">
                        <input type="text" data-toggle="laydate" data-date-type="month" value="2019年06月" data-date-format="yyyy年MM月" class="form-control" placeholder="时间">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="section-title">
                <h3>特殊用法</h3>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="section-content">
                <div class="form-group">
                    <label class="col-sm-2 control-label">非input元素：</label>
                    <div class="col-sm-4"> <span class="form-control" data-toggle="laydate" data-date-type="date" data-date="2018-08-08"></span>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

源码

//初始化laydate
        $("[data-toggle='laydate']").each(function () {
            var type = $(this).data("date-type") || "date";
            var range = $(this).data("date-range") || false;
            var isInitialNow = $(this).data("date-now") || false;
            var initialDate = ($(this).is("input") ? $(this).val() : $(this).data("date")) || (isInitialNow ? new Date() : "");
            var min = $(this).data("date-min") || 86400000;
            var max = $(this).data("date-max") || 4073558400000;
            var format = $(this).data("date-format") || formats[type];
            var calendar = $(this).data("date-holiday") || false;
            var mark = $(this).data("date-day") || "{}";
            var showClear = ($(this).data("date-show-clear") === undefined || $(this).data("date-show-clear")) ? true : false;
            var showNow = ($(this).data("date-show-now") === undefined || $(this).data("date-show-now")) ? true : false;
            var showConfirm = $(this).data("date-show-confirm") === undefined || $(this).data("date-show-confirm") ? true : false;
            var showBottom = ($(this).data("date-show-bottom") === undefined || $(this).data("date-show-bottom")) ? ((showClear || showNow || showConfirm) ? true : false) : false;

            var btns = [btn_clear, btn_now, btn_confirm];

            if (!showClear) btns.splice($.inArray(btn_clear, btns), 1);
            if (!showNow) btns.splice($.inArray(btn_now, btns), 1);
            if (!showConfirm) btns.splice($.inArray(btn_confirm, btns), 1);

            laydate.render({
                elem: this,
                value: initialDate,
                // trigger: "click",
                type: type,
                theme: "bootstrap",
                range: range,
                min: min,
                max: max,
                format: format,
                calendar: calendar,
                mark: mark,
                showBottom: showBottom,
                btns: btns
            });
        });

相关源码

gitee：https://gitee.com/xbd521/laydate-theme-bootstrap

github：https://github.com/liuminglei/laydate-theme-bootstrap

注意事项

必须引入bootstrap.css/bootstrap.min.css样式依赖

必须引入jquery依赖

laydate自定义小时范围和分钟段
02-27
laydate重写了datetime类型的，小时和分钟，去掉了秒数。实现了，选择日期后，点击选择时间，时间8：00-17：00，分钟仅有0和半小时两个。秒列去掉了。
laydate日期选择插件蓝色风格自定义及使用Demo
前端工程师--则丸
12-30 1万+
今天给大家介绍的是一款日期选择插件，下面是官网地址 http://laydate.layui.com/  你是时候换一款日期控件了，而layDate非常愿意和您成为工作伙伴。她致力于成为全球最用心的web日期支撑，为国内外所有从事web应用开发的同仁提供力所能及的动力。她基于原生JavaScript精心雕琢，兼容了包括IE6在内的所有主流浏览器。她具备优雅的内部代码，良好的性能体验，和完善
日期控件laydate 天蓝色皮肤 需要和laydate js结合使用
09-03
日期控件，使用了laydate日期控件，只是缺少了天蓝色皮肤，自制的。
LayUI laydate日期选择器自定义 快捷选中今天、昨天 、本周、本月等等
weixin_40362806的博客
04-23 1597
LayUI laydate日期选择器自定义 快捷选中今天、昨天 、本周、本月
bootstrap时间选择控件
最新发布
10-26
Bootstrap时间选择控件是一种在Web前端开发中广泛使用的组件，它基于流行的Bootstrap框架，该框架提供了一套丰富的界面元素和组件，使得网页和Web应用程序的用户界面设计既美观又一致。Bootstrap时间选择控件主要...
BootStrap时间控件.zip
05-22
Bootstrap时间控件是一种基于Twitter Bootstrap框架的用户界面组件，用于在网页上实现高效、美观的时间选择功能。Bootstrap作为最流行和广泛使用的前端开发框架之一，提供了丰富的预设样式、组件和JavaScript插件，...
bootstrap-switch开关控件
01-15
Bootstrap Switch控件是一种在Web开发中广泛使用的交互元素，它为用户提供了一种直观的方式来切换两种状态，例如开启或关闭某个选项。这个控件基于流行的前端框架Bootstrap，通过结合jQuery库来增强其功能和用户体验...
Bootstrap中表单控件状态(验证状态)
09-01
同时，根据实际需求，开发者可能还需要自定义JavaScript代码来进行表单验证逻辑，以便在用户输入时动态改变表单控件的状态。 总的来说，Bootstrap的表单控件状态和验证机制提供了一套强大且易于使用的工具，帮助...
laydate皮肤拓展
04-30
本资源为laydate拓展，新增皮肤插件可视化修改，位于时间选择模块的最下方！！！ 【提示：由于上传时疏忽大意，未上传jquery.min.js文件，下载的小伙伴只需将页面的jquery路径改成自己的即可】
laydate.css
10-23
laydate 时间插件的css样式,更新其中的时间的样式,让时间插件得以显示
laydate日期选择
05-26
一个基于laydate的日期选择控件小例子
jquery更换皮肤时间控件
06-18
jquery更换皮肤时间控件可以更换皮肤，里面还有百度tangram的时间控件应用
bootstrap laydate日期组件使用详解
08-31
主要为大家详细介绍了bootstrap laydate日期组件使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
laydate-v5.0.9自定义小时范围和分钟间隔(半小时)
a740590297的博客
02-26 3873
话不多说，先上图，看效果  ，符合自己的需求再往下看。 源码以放，求个积分，自己的积分不够用了。拜谢下载的，没看懂的可以评论或私聊 点我下载源码 说说上图实现的内容：type为datetime类型，1、可选时间为系统当前时间以后(可取消限制)。2、选择日期后，点击选择时间，小时设置范围8:00-17:00(展示哪几个时段，或者不间隔的小时都可以自己定义)。3、分钟改为半小时间隔(10分钟...
laydate兼容bootstrap
[心从此刻开始]的专栏
10-13 2270
因为Bootstrap使用了 * {box-sizing:border-box;}来reset浏览器的默认盒子模型。所以加上以下代码就可以兼容Bootstrap了  .laydate_box, .laydate_box * {         box-sizing:content-box;     }
layui laydate样式
sdaujsj1的博客
06-15 1099
https://www.layui.com/doc/modules/laydate.html
一个超炫的日期控件laydate
热门推荐
sidongxue2的专栏
01-28 1万+
学习网址:http://sentsin.com/layui/laydate 这个日期控件是基于javascript，功能非常强大！ 闲话少说我做了一点小练习: <!-- 日期控件laydate的使用. @author IluckySi @since 20150128 网址:http://sentsin.com/layui/laydate 核心方法：laydate(options)
Bootstrap开关控件插件：自定义尺寸与颜色
Bootstrap-switch是基于Bootstrap框架开发的一个增强型开关控件，它利用jQuery插件的方式，为Web开发人员提供了一个易于使用并且功能丰富的开关组件。此控件可以非常方便地集成到使用Bootstrap的网页中，以提供更加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值