Am I going mad? You can change the date on the basic datepicker one of several ways:
You get different dates reported in the changeMonth event (or from getformattedDate) depending on which way you change the date, but one of them doesn't make sense.
If you click on the month name and select a month, it returns the 1st day of the new month, all good. If you click on the arrows it returns the same day but in the new month e.g. if you are on the 29th of November, it will return the 29th of December. Still good.
However, if you click on a day in the next month, it returns the original date that you just came from e.g. if I was on the 29th of November, and click on the 5th of December, it still returns the 29th of November.
$('#calendar').datepicker({
autoclose: true,
format: "yyyy-mm-dd",
updateViewDate: true,
todayHighlight: false,
immediateUpdates: true
})
.datepicker('update', '2021-11-29')
.on('changeDate', function(e){
// console.log("changeDate: triggered", e);
})
.on('changeMonth', function(e){
let updated_content = $('#show_date').val() + '\n' + e.date.toString() + " : " + $('#calendar').datepicker('getFormattedDate')
$('#show_date').val(updated_content)
});
I've set up a basic fiddle to illustrate this behavior at https://jsfiddle.net/shaunhurley/k5ovtb9h/35/
Am I missing something?
I appears that by clicking a date the date is changed by that actual date click, rather than by the month change. The problem is that the changeMonth event gets fired before the date is actually changed.
Here's a workaround:
.on('changeMonth', function(){
setTimeout(()=> {
let updated_content = $('#show_date').val() + '\n' + $('#calendar').datepicker('getDate').toString() + " : " + $('#calendar').datepicker('getFormattedDate');
$('#show_date').val(updated_content)
}, 0)
})
And an updated fiddle: https://jsfiddle.net/TokerX/8jfkua7v/