您现在的位置是：首页 > 前端 > 后端 > WEB基础 WEB基础

bootstrap-daterangepicker 时间选择器使用方法

2021-03-10【WEB基础】1096人已围观

简介bootstrap-daterangepicker 时间选择器使用方法

> 插件文件下载 `https://gitee.com/mirrors/bootstrap-daterangepicker`

[插件下载](https://gitee.com/mirrors/bootstrap-daterangepicker "插件下载")

![](http://image.apidata.vip/blog/article/2021-03-10/161537176951584166.jpg)

```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
	<script type="text/javascript" src="daterangepicker.js"></script>
</head>
<body>
	<div>
		<input type="text" id="config-demo" class="form-control">
	</div>
</body>
</html>

updateConfig();
	function updateConfig()
	{
		var options = {
			showDropdowns: true,//当设置值为true的时候，允许年份和月份通过下拉框的形式选择 默认false
			autoUpdateInput: true,//1.当设置为false的时候,不给与默认值(当前时间)2.选择时间时,失去鼠标焦点,不会给与默认值 默认true
			timePicker24Hour : true,//设置小时为24小时制 默认false
			timePicker : false,//可选中时分 默认false
		};
		options.locale = {
			direction: $('#rtl').is(':checked') ? 'rtl' : 'ltr',
			format: 'YYYY-MM-DD',
			separator: ' ~ ',
			applyLabel: '确认',
			cancelLabel: '取消',
			fromLabel: 'From',
			toLabel: 'To',
			customRangeLabel: 'Custom',
			daysOfWeek: ['一', '二', '三', '四', '五', '六','日'],
			monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			firstDay: 1
		}
		$('#config-demo').daterangepicker(options, function(start, end, label) 
			{
				console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
			}
		);
	}
});
</script>
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：css设置类似于微信设置图片显示

下一篇：详解PhpSpreadsheet设置单元格