利用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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM