这篇文章将为大家详细讲解有关日期范围选择组件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>
-
外层div上增加daterange class。
-
一个普通的input标签。
-
一个日历的i标签。
三、内部封装
首先是js。
再来看css。
关于日期范围选择组件bootstrap-daterangepicker怎么用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
原创文章,作者:506227337,如若转载,请注明出处:https://blog.ytso.com/tech/opensource/231909.html