温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

日期范围选择组件bootstrap-daterangepicker怎么用

发布时间:2021-12-23 17:24:05 来源:亿速云 阅读:133 作者:柒染 栏目:大数据

这篇文章将为大家详细讲解有关日期范围选择组件bootstrap-daterangepicker怎么用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

嗯,在我还没有发现bootstrap-daterangepicker组件时,
在页面需要选择日期范围时,我是傻乎乎的创建两个日期组件。

零、效果展示

现在是这样的:

日期范围选择组件bootstrap-daterangepicker怎么用

以前是这样的:

日期范围选择组件bootstrap-daterangepicker怎么用

不比不知道,一比高下立断啊。

一、源码下载

Date Range Picker for Bootstrap

注意要依赖Bootstrap, jQuery and Moment.js。

Date Range Picker relies on Bootstrap, jQuery and Moment.js. Include the required scripts and stylesheet in your page.

二、使用方法

<div class="form-group daterange">
    <label>下单时间:</label>
    <input class="form-control" name="range_date" type="text">
    <i class="fa fa-calendar"></i>
</div>
  1. 外层div上增加daterange class。

  2. 一个普通的input标签。

  3. 一个日历的i标签。

三、内部封装

首先是js。

日期范围选择组件bootstrap-daterangepicker怎么用

再来看css。

日期范围选择组件bootstrap-daterangepicker怎么用

关于日期范围选择组件bootstrap-daterangepicker怎么用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI