After implementing a datepicker with bootstrap, I noticed that whenever I click on the field, it displays the last years I have selected. This behavior obstructs the calendar view and serves no real purpose.
Below is an excerpt of my current script along with a visual representation of what I am experiencing.
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-2"> <!-- Datepicker column -->
<form method="post" id="date-form">
<div class="form-group"> <!-- Date input 1-->
<label class="control-label" for="date">Start Date</label>
<input type="text" class="form-control" name="startDateN" id="startDate" placeholder="From" />
</div>
<div class="form-group"> <!-- Date input 2-->
<label class="control-label" for="date">End Date</label>
<input type="text" class="form-control" name="endDateN" id="endDate" placeholder="To" />
</div>
<div class="form-group"> <!-- Submit button -->
<button class="btn btn-primary " name="submit" type="submit">Submit</button>
</div>
</form>
</div>
<div class="col-md-10"> <!-- Here comes the graph and the xAxis chooser -->
<div id="plot-wrapper" style="position: relative; overflow: visible; margin: 10px;">
<svg id="plotSVG" width="100%" height=400px></svg>
<select id="select-x-var" style="position: absolute; bottom:0px; left: 670px;">
<option value="jastimmen" selected>% Ja-Stimmen</option>
<option value="thema">Thema</option>
<option value="unterthema">Unterthema</option>
</select>
</div>
</div>
</div>
</div>
</div>;
<!-- Datapicker -->
<script>
$(document).ready(function(){
var date_input=$('input[name="startDateN"]'); //our date input has the name "startDateN"
var date_input1=$('input[name="endDateN"]');
.
.
. (Additional script omitted for brevity)
</script>
I attempted to include showTooltip: false, as well as:
beforeShowDay: function(date){
return {
tooltip: false
}
}
Unfortunately, neither approach yielded any results. Confused by the second option, I sought assistance from chatgpt in desperation.