我正在尝试将数据选择器与 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>
2 回答
守着星空守着你
TA贡献1799条经验 获得超8个赞
我找到了使用 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
TA贡献2036条经验 获得超8个赞
尝试这个
<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>
添加回答
举报
0/150
提交
取消