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