时间插件--daterangepicker使用和配置详解

最新推荐文章于 2024-05-17 09:45:08 发布

呆呆_小茗

最新推荐文章于 2024-05-17 09:45:08 发布

阅读量4.8w

点赞数 6

分类专栏： Bootstrap 文章标签：时间插件 bootstrap 单个时间范围多个

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

版权

Bootstrap 专栏收录该内容

2 篇文章 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.代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>daterangepicker组件Demo</title>
    <link rel="stylesheet" href="bootstrap.min.css">
 	<link rel="stylesheet" href="daterangepicker.css">
 
	<script src="jquery-2.2.3.min.js"></script>
	<script src="daterangepicker/moment.js"></script>
	<script src="daterangepicker/daterangepicker.js"></script>
 <script type="text/javascript">

 $(function () {
	 	//单个时间插件
	     $("input[name='date1']").daterangepicker(
	    		 {
	    	            singleDatePicker: true,//设置为单个的datepicker，而不是有区间的datepicker 默认false
	    	            showDropdowns: true,//当设置值为true的时候，允许年份和月份通过下拉框的形式选择 默认false
	    	            autoUpdateInput: false,//1.当设置为false的时候,不给与默认值(当前时间)2.选择时间时,失去鼠标焦点,不会给与默认值 默认true
	    	            timePicker24Hour : true,//设置小时为24小时制 默认false
	    	            timePicker : false,//可选中时分 默认false
	    	    		locale: {
	    	    			format: "YYYY-MM-DD",
	    	    			separator: " - ",
	    	    			daysOfWeek: ["日","一","二","三","四","五","六"],
	    	    			monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
	    	    		}
	    	    			
	    	     }
	     ).on('cancel.daterangepicker', function(ev, picker) {
	         $("#date1").val("请选择日期");
	         $("#submitDate").val("");
	     }).on('apply.daterangepicker', function(ev, picker) {
	     $("#submitDate").val(picker.startDate.format('YYYY-MM-DD'));
	     $("#date1").val(picker.startDate.format('YYYY-MM-DD'));
	 });
	 	
	 	//区间时间插件
	     $("input[name='date2']").daterangepicker(
	    		 {
	    	        // autoApply: true,
	    	        autoUpdateInput: false,
	    	        // alwaysShowCalendars: true,
	    	        ranges: {
	    	            '今天': [moment(),moment()],
	    	            '昨天': [moment().subtract(1, 'days'),moment().subtract(1, 'days')],
	    	            '近7天': [moment().subtract(7, 'days'), moment()],
	    	            '这个月': [moment().startOf('month'), moment().endOf('month')],
	    	            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
	    	        },
	    	        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'));
             $("#endTime").val(picker.endDate.format('YYYY-MM-DD'));
             $("#date2").val(picker.startDate.format('YYYY-MM-DD')+" 至 "+picker.endDate.format('YYYY-MM-DD'));
	 });
	 	
 });
 </script>
</head>
<body>
         <div class="form-group">
            <label>单个</label>
            <div>
            	<input type="text" name="date1" id="date1" class="form-control" style="width: 20%;">
            	 <input type="hidden" id = "submitDate" name="submitDate" class="form-control" />
            </div>
         </div>
         <br>
         <div class="form-group">
            <label>区间</label>
            <div>
            	<input type="text" name="date2" id="date2" class="form-control" style="width: 20%;">
            	 <input type="hidden" id = "startTime" name="startTime" class="form-control" />
            	 <input type="hidden" id = "endTime" name="endTime" class="form-control" />
            </div>
         </div>
</body>
</html>

呆呆_小茗

关注

6
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
2
评论
时间插件--daterangepicker使用和配置详解

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

扫一扫