I am trying to use datapicker with Bootstrap 4, the input display correctly the big calendar where I can select the date, the date format is also correct as I expected, the only thing I can’t display is the little calendar icon next to the input field.
Can you please suggest?
Here is the code:
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>
Thanks
2
Answers
I found the solution using font-awsome.css, without using
input type="date"
and only adding this html tag after the text input<i class="fa fa-calendar"></i>
.here is the code:
Try this