bootstrap-daterangepicker：日历范围选择插件的使用

最新推荐文章于 2024-11-22 14:23:26 发布

阿凡69

最新推荐文章于 2024-11-22 14:23:26 发布

阅读量440

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43773870/article/details/91868772

本文介绍了bootstrap-daterangepicker插件的使用，它是一个用于选择时间段的Bootstrap插件。通过引入Bootstrap, jQuery和Moment.js，可以将原本的单一日历选择升级为方便易用的日期范围选择器。在内部封装部分，详细展示了JS和CSS的配置方法。" 86545804,8274622,Python学习：换行与避免死机,"['Python', 'Jupyter Notebook', '编程问题', '循环控制']

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

daterangepicker是bootstrap的一个日历插件，主要用来选择时间段的插件。

未使用daterangepicker前的日历选择器是这样的：
要创建两个日历组件 low

使用了daterangepicker之后:
只需要创建一个日历组件好用简单容易操作

引入相关插件

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

	<!-- 需要引入的依赖库 -->
	<script type="text/javascript" src="../../assets/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../../assets/js/moment.min.js"></script>
	
	
	<!-- 引用daterangepicker 相关文件 -->
	<script type="text/javascript" src="../../assets/js/daterangepicker.js"></script>
	<link rel="stylesheet" href="../../assets/css/daterangepicker.css"/>
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

内部封装

首先是js。

$(".daterange input").each(function() {
					var $this = $(this);

					$this.daterangepicker({
						locale : {
							"format" : "YYYY-MM-DD",// 显示格式
							"separator" : " / ",// 两个日期之间的分割线
							// 中文化
							"applyLabel" : "确定",
							"cancelLabel" : "取消",
							"fromLabel" : "开始",
							"toLabel" : "结束",
							"daysOfWeek" : [ "日", "一", "二", "三", "四", "五", "六" ],
							"monthNames" : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
							"firstDay" : 1
						},
					}, function(start, end, label) {
						// 点击确定后的事件，下面是为了bootstrap validate得校验，
						// 若未使用，可忽视
						if ($this.parents("form.required-validate").length > 0) {
							var $form = $this.parents("form.required-validate");

							var name = $this.attr("name");
							if ($form.length > 0) {
								var data = $form.data('bootstrapValidator');
								data.updateStatus(name, 'NOT_VALIDATED', null)
								// Validate the field
								.validateField(name);
							}
						}
					// 设置最小宽度，否则显示不全
					}).css("min-width", "210px").next("i").click(function() {
						// 对日期的i标签增加click事件，使其在鼠标点击时可以拉出日期选择
						$(this).parent().find('input').click();
					});
			});

再来看看css.(样式可以用layui-input的样式或者bootstrap.css的样式)

/* 定位i标签在input标签内 */
.daterange i {
    position: absolute;
    bottom: 10px;
    right: 14px;
    top: auto;
    cursor: pointer;
}
.daterange {
    position: relative;
}
/* daterange i end */