bootstrap 4 datepicker，日历图标不显示
我正在尝试将数据选择器与 Bootstrap 4 一起使用，输入正确显示大日历，我可以在其中选择日期，日期格式也如我所料正确，我唯一无法显示的是旁边的小日历图标输入字段。你能建议一下吗？
这是代码：
document.addEventListener('DOMContentLoaded', function(e) {
$('[name="date"]')
.datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// do somwthing here
});
});
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
</head>
<body>
<form id="demoForm" action="success.html" method="POST">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Date</label>
<div class="col-md-4">
<input type="text" class="form-control" name="date" />
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
</body>
</html>
Helenr2回答
-
守着星空守着你
我找到了使用 font-awsome.css 的解决方案，没有使用input type="date"，只在文本输入后添加了这个 html 标签<i class="fa fa-calendar"></i>。这是代码：document.addEventListener('DOMContentLoaded', function(e) { $('[name="date"]') .datepicker({ format: 'dd/mm/yyyy' }) .on('changeDate', function(e) { // do somwthing here });});.fa { position: absolute; right: 25px; top: 11px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}<html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css"> </head> <body> <form id="demoForm" action="success.html" method="POST"> <div class="form-group row"> <label class="col-sm-3 col-form-label">Date</label> <div class="col-md-4"> <input type="text" class="form-control" name="date" /> <i class="fa fa-calendar"></i> </div> </div> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script> </body> </html> -
慕桂英3389331
尝试这个<html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <form id="demoForm" action="success.html" method="POST"> <div class="form-group row"> <label class="col-sm-3 col-form-label">Date</label> <div class="col-md-4"> <input type="date" class="form-control" name="date" /> </div> </div> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
随时随地看视频慕课网APP
相关分类
JavaScript