利用Bootstrap-datepicker插件选择日期

Bootstrap-datepicker也是一款非常好用的选择日期插件,Github上的star已有9994个star,作者还针对不同的语言封装了日期语言包,非常方便使用,传送门:uxsolutions/bootstrap-datepicker
使用说明,看官方文档,需要使用css预处理语言less将build/build_standalone.less编译为datepicker.css,然后再页面引入jquery.jsbootstrap-datepicker.js、因为我们一般使用简体中文,所以还需要引入bootstrap-datepicker.zh-CN.js(该文件位于 js/locales 下)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./datepicker.css">
	<script src="./js/jquery-3.2.1.js"></script>
	<script src="./js/bootstrap-datepicker.js"></script>
	<script src="./js/locales/bootstrap-datepicker.zh-CN.js"></script>
</head>
<body>
	<div class="input-group date" data-provide="datepicker">
	    选择日期:<input type="text" id="datepicker" class="form-control">
	    <div class="input-group-addon">
	        <span class="glyphicon glyphicon-th"></span>
	    </div>
	</div>
	<script>
		$('#datepicker').parent().datepicker({
			"autoclose":true,"format":"yyyy-mm-dd","language":"zh-CN"
		});
	</script>
</body>
</html>
posted @ 2017-08-19 00:35  蚁象  阅读(12137)  评论(0编辑  收藏  举报