Bootstrap4中居然没有带日期选择的控件,蜜汁尴尬,好在找到了gijgo这个插件,bootcdn上也有支持,记录一下用法
CDN地址
效果演示
代码
全部使用bootcdn上的引入,注意需要额外引入中文语言包,并在实例化datepicker对象的时候加入配置locale format weekStartDay分别表示语言 输出日期格式 每周第一天
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/gijgo/1.9.13/combined/css/gijgo.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">日期选择演示</h4>
<p class="card-text">请选择日期</p>
<input id="datepicker" class="col-12">
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/esm/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/gijgo/1.9.13/combined/js/gijgo.min.js"></script>
<script src="https://cdn.bootcss.com/gijgo/1.9.13/combined/js/messages/messages.zh-cn.min.js"></script>
<script>
$("#datepicker").datepicker({
locale: 'zh-cn',
format: 'yyyy-mm-dd',
weekStartDay: 1
});
</script>
</body>
</html>
高级设置
限制可选日期范围(今天至未来5天)
<script>
$("#datepicker").datepicker({
locale: 'zh-cn',
format: 'yyyy-mm-dd',
weekStartDay: 1,
minDate: function () {
return new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
},
maxDate: function () {
var date = new Date();
date.setDate(date.getDate() + 5);
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
});
</script>
