Currently, I am working on a form that includes a date picker using the bootstrap datepicker
In this setup, I have hidden the main bootstrap field and added three custom fields. When any of these fields are clicked, the calendar should open next to them. The functionality is almost there, but currently, the calendar opens fixed at the top of the page. Is there a way to make it open near the respective fields?
// To initialize the datepicker
const datePicker = $("#datepicker").datepicker({
todayHighlight: true
});
// Show the datepicker when clicking on the input field
$('.input-wrapper > input').on('click', (e) => datePicker.datepicker("show"));
// On date selection
const year = document.getElementById('year');
const month = document.getElementById('month');
const day = document.getElementById('day');
datePicker.on('changeDate',function(event){
const selectedDate = datePicker.datepicker('getDate');
year.value = selectedDate.getFullYear();
day.value = selectedDate.getDate();
month.value = selectedDate.getMonth() + 1;
datePicker.datepicker('hide')
})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: 150vh;
}
.call-form-item-date {
margin-top: 150px;
margin-bottom: 150px;
}<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>
<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-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>