I created a datepicker with bootstrap. It works mostly as I want it to, but everytime I click on the field it shows me the last years I have chosen. This blocks the calendar view and is also not really useful..
Here is part of my script thus far. see also the picture for what I see.
<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"]'); //our date input has the name "endDateN"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var from={
format: "yyyy",
viewMode: "years",
minViewMode: "years",
autoclose:true,
showTooltip: false,
startView: 2,
defaultViewDate: {
year: '2000'
},
startDate: '-148y', //2023-1875
endDate: '+0y', //2023
todayBtn: false
};
var to={
format: "yyyy",
viewMode: "years",
minViewMode: "years",
autoclose:true,
startView: 2,
defaultViewDate: {
year: '2000'
},
startDate: date_input.val(), // Set the start date of "to" datepicker to the selected year from "from" datepicker
endDate: '+0y' //2023
};
date_input.datepicker(from).on('changeDate', function(selected){
// Update the start date of the "to" datepicker when a new year is selected in the "from" datepicker
to.startDate = new Date(selected.date.getFullYear(), 0, 1);
date_input1.datepicker('setStartDate', to.startDate); // Update the "to" datepicker with the new start date
});
date_input1.datepicker(to);
})
// Get the submit button element
const submitBtn = document.querySelector('button[type="submit"]');
// Add an event listener to the submit button
submitBtn.addEventListener('click', function(e) {
e.preventDefault(); // Prevent the default form submission
// Get the values of the datepickers
const startDate = document.querySelector('input[name="startDateN"]').value;
const endDate = document.querySelector('input[name="endDateN"]').value;
// Do something with the startDate and endDate variables
testing(startDate, endDate);
});
</script>
</div>
I tried to add
showTooltip: false,
and also
beforeShowDay: function(date){
return {
tooltip: false
}
}
but neither has worked at all. (I also don't understand the second one, but I turned to chatgpt in desperation and this is what I got)
Adriaan, I believe this tooltip that appears to you is just a list of browser suggestions for your input.
Try set this param on your input field autocomplete="off":
<input type="text" class="form-control" name="startDateN" id="startDate" placeholder="From" autocomplete="off" />
You can try set also in JS:
date_input.autocomplete = 'off';