Bootstrap日期插件daterangepicker使用详解
介绍
Daterangepicker是一个Bootstrap风格的日期范围选择器插件。它可以让用户直接在页面上快速选择时间段,而不需要手动输入。它可以与Moment.js和jQuery结合起来使用。本篇攻略将介绍如何使用Daterangepicker插件进行日期范围选择。
步骤
1.获取插件
在使用Daterangepicker之前,我们需要先获取该插件。我们可以在GitHub上找到Daterangepicker插件并下载它,或者使用npm包管理器进行安装。
npm install daterangepicker
2.引入插件
在HTML文件中,我们需要引入Daterangepicker插件的CSS和JavaScript文件。我们可以使用CDN来引入它们,也可以在本地下载后进行引入。
<!-- 载入Bootstrap和Daterangepicker的CSS文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<!-- 载入jQuery和Moment.js库以及Daterangepicker的脚本文件 -->
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.15.1/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
3.初始化插件
在引入Daterangepicker插件的JS文件之后,我们需要调用它的daterangepicker()方法来初始化它。
$(function() {
$('input[name="daterange"]').daterangepicker();
});
在上述代码中,我们选择了一个名为“daterange”的input元素,并绑定了Daterangepicker插件。这样,当用户在该input中选择一个日期范围时,它就会弹出一个日期选择器。
Daterangepicker还有很多其他的配置选项。下面介绍其中的一些。
4.配置选项
startDate, endDate
通过设置startDate和endDate来设置日期选择器的起始和结束日期。这些选项应该是Moment.js对象。
$(function() {
$('input[name="daterange"]').daterangepicker({
startDate: moment().subtract(7, 'days'),
endDate: moment()
});
});
上面的代码将日期范围设置为从七天前到今天。
minDate, maxDate
通过设置minDate和maxDate来限制用户选择的日期范围。这些选项应该是Moment.js对象。
$(function() {
$('input[name="daterange"]').daterangepicker({
minDate: '01/01/2016',
maxDate: '12/31/2016'
});
});
上面的代码将限制用户的选择范围为2016年的1月1日至12月31日。
dateLimit
通过设置dateLimit来限制用户选择的日期范围的最大时间跨度。
$(function() {
$('input[name="daterange"]').daterangepicker({
dateLimit: {
days: 7
}
});
});
上面的代码将限制用户选择的时间跨度为七天。
5.示例说明
以下是两个使用Daterangepicker插件的示例说明。
示例1
<div class="form-group">
<label for="daterange">请选择日期范围:</label>
<input type="text" name="daterange" class="form-control" />
</div>
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left', // 弹出日期选择器的位置
startDate: moment().subtract(14, 'days'),
endDate: moment(),
minDate: '01/01/2016',
maxDate: '12/31/2016',
dateLimit: {
days: 31
},
locale: { // 语言本地化
format: 'MM/DD/YYYY',
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '从',
toLabel: '到',
customRangeLabel: '自定义',
weekLabel: '周',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData().firstDayOfWeek()
},
ranges: { // 快速选择范围
'最近7天': [moment().subtract(6, 'days'), moment()],
'最近30天': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
});
});
</script>
上面的代码将创建一个日期范围选择器,用户可以选择任意一个时间段,最大时间跨度为31天,并且有四个快速选择范围:最近7天、最近30天、本月、上个月。选择的起始日期和结束日期会自动填充到input元素中。
示例2
<div class="input-group">
<input type="text" class="form-control" name="birthdate" value="10/24/1984" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
<script>
$(function() {
$('input[name="birthdate"]').daterangepicker({
singleDatePicker: true, // 单个日期选择器
showDropdowns: true, // 显示年份和月份下拉列表
minYear: 1900,
maxYear: moment().year() - 18, // 最大年龄为18岁
autoApply: true,
locale: { // 语言本地化
format: 'MM/DD/YYYY',
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
weekLabel: 'W',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData().firstDayOfWeek()
}
});
});
</script>
上述代码将创建一个单个日期选择器,格式为“月/日/年”,用户不能选择18岁以下的日期。在右侧有一个日历图标,用户单击时会弹出日期选择器。
结论
以上是使用Daterangepicker插件进行日期范围选择的详细攻略。Daterangepicker是一个功能强大的插件,它可以轻松地在Bootstrap网站中创建复杂的日期选择器和范围选择器,并提供了很多配置选项,可以满足各种需求。我们希望这篇攻略对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:bootstrap日期插件daterangepicker使用详解 - Python技术站