I have a form where I remade the bootstrap datepicker a little by inserting my fields with inputs, everything works as it should. The only problem is the autocomplete that is used in browsers, and when you click on the field, the values have already been entered appear, for whom it is not clear what I mean
Maybe I can somehow change the input type so that this autocomplete does not exist? Or how can I fix this problem? It is important that at the same time the date selection in the form remains working
// Initialize datepicker
const dp = $("#month").datepicker({
todayHighlight: true
});
// Show datepicker on <input> click
$('.input-wrapper > input').on('click', (e) => dp.datepicker("show"));
// On date change
const y = document.getElementById('year');
const m = document.getElementById('month');
const d = document.getElementById('day');
dp.on('changeDate',function(ev){
const date = dp.datepicker('getDate');
y.value = date.getFullYear();
d.value = date.getDate();
dp.datepicker('hide');
m.value = date.getMonth() + 1;
})
dp.on('hide',function(ev){
const date = dp.datepicker('getDate');
m.value = date.getMonth() + 1;
})label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
}
input {
margin-right: 20px;
box-sizing: border-box;
outline: none;
border: none;
background-color: #F4F5F8;
width: 50px;
}
.span-wrapper {
display: flex;
align-items: flex-end;
}
span {
color: #808694;
font-family: Montserrat;
font-size: 8px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
text-align: center;
width: 50px;
}
.main-content {
min-height: 10vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<div class="main-content">
<p>Main content...</p>
<p>Main content...</p>
<p>Main content...</p>
<p>Main content...</p>
<p>Main content...</p>
<p>Main content...</p>
<p>Main content...</p>
<p>Main content...</p>
<p>Main content...</p>
</div>
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-comment') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item-date">
<label for="date">Select a date *</label>
<div class="input-wrapper">
<input class="js-form-month" id="month" type="text" name="month">
<input class="js-form-day" id="day" type="text" name="day">
<input class="js-form-year" id="year" type="text" name="year">
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<div class="span-wrapper">
<span for="month">Month</span>
<span for="day">Day</span>
<span for="year">Year</span>
</div>
</div>
</div>
</form>
</div>