时间插件--daterangepicker使用

最新推荐文章于 2024-05-05 07:41:03 发布

smile radiantly

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量365

点赞数

分类专栏：前端插件文章标签： html javascript

原文链接：https://blog.csdn.net/baidu_38990811/article/details/79509418

版权

前端插件专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便

用于选择日期范围的JavaScript组件。设计用于Bootstrap CSS框架。

它最初是为了改善报表而创建的，它可以连接到任何网页元素，弹出两个日历，用于选择日期、时间或从预定义的范围，如“最后30天”。

2.需要的js和css:

bootstrap.min.css

daterangepicker.css

jquery-2.2.3.min.js

moment.js

daterangepicker.js

获取代码文件和js css文件地址:https://pan.baidu.com/s/12fjQSWkm5rlWi2dgPH_tyw 密码:elwb

3.配置详解参考网址:

配置详解(不太全,但够了):https://www.cnblogs.com/leijing0607/p/7698414.html

配置详解(配合上面一起看):http://blog.csdn.net/Webben/article/details/78319276

问题已经小BUG修复(可以看看):https://www.cnblogs.com/gtlm/p/7719739.html

4.代码:

<html>
	<head>
		<%-- 支持移动设备优先 --%>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<%-- 引入css样式 --%>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.css">
		<%-- 引入jquery文件 --%>
		<script type="text/javascript" src="bootstrap/js/jquery-2.1.0.js"></script>
		<%-- 引入bootstrap.js文件之前必须先引入jquery文件 --%>
		<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
		
		<link rel="stylesheet" type="text/css" href="daterangepicker/daterangepicker.css" />
		<%--需要引用的依赖库--%>
		<script type="text/javascript" src="daterangepicker/moment.js"></script>
		<!-- 引用 daterangepicker 相关文件-->
		<script type="text/javascript" src="daterangepicker/daterangepicker.js"></script>
	</head>
	<body>	
		<form class="form-inline" style="margin-left: 30px;">
		   <div class="form-group">
		       <label for="date2">区间</label>
		       <input type="text" name="date2" id="date2" class="form-control" size="50">
		       <input type="hidden" id = "startTime" name="startTime" class="form-control" />
		       <input type="hidden" id = "endTime" name="endTime" class="form-control" />
		   </div>
		   <button type="button" class="btn btn-info btn-sm" id="findData">搜索</button>
		</form>
	
	</body>
	<script type="text/javascript">
	    //区间时间插件
	    $("input[name='date2']").daterangepicker(
	        {
	            timePicker: true, //显示时间
	            timePicker24Hour: true, //时间制
	            timePickerSeconds: true, //时间显示到秒
	            startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
	            endDate: moment(new Date()), //设置结束器日期
	            // maxDate: moment(new Date()), //设置最大日期
	            "opens": "bottom",
	            // autoApply: true,
	            autoUpdateInput: false,
	            // alwaysShowCalendars: true,
	            ranges: {
	                '今天': [moment().startOf('day'),moment()],
	                '昨天': [moment().subtract(1, 'days').startOf('day'),moment().subtract(1, 'days').endOf('day')],
	                '近7天': [moment().subtract(6, 'days').startOf('day'), moment()],
	                '近30天': [moment().subtract(29, 'days').startOf('day'), moment()],
	                '这个月': [moment().startOf('month'), moment().endOf('month')],
	                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
	            },
	            showWeekNumbers: false,
	            locale: {
	                format: "YYYY-MM-DD HH:mm:ss",
	                separator: " - ",
	                applyLabel: "确认",
	                cancelLabel: "清空",
	                fromLabel: "开始时间",
	                toLabel: "结束时间",
	                customRangeLabel: "自定义",
	                daysOfWeek: ["日","一","二","三","四","五","六"],
	                monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
	            }
	        }
	    ).on('cancel.daterangepicker', function(ev, picker) {
	        $("#date2").val("请选择日期范围");
	        $("#startTime").val("");
	        $("#endTime").val("");
	    }).on('apply.daterangepicker', function(ev, picker) {
	        $("#startTime").val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));
	        $("#endTime").val(picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
	        $("#date2").val(picker.startDate.format('YYYY-MM-DD HH:mm:ss')+" 至 "+picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
	    });
	</script>
</html>

smile radiantly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时间插件--daterangepicker使用

1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便用于选择日期范围的JavaScript组件。设计用于Bootstrap CSS框架。它最初是为了改善报表而创建的，它可以连接到任何网页元素，弹出两个日历，用于选择日期、时间或从预定义的范围，如“最后30天”。2.需要的js和css:bootstrap.min.cssdaterangepicker.c...
复制链接

扫一扫