JSFiddle: https://jsfiddle.net/09e7mrk5/3/
I'm using Tempus Dominus (the Bootstrap 4 Datetimepicker), in the Date & Time mode. Selections made through the GUI calendar work OK as can be seen by clicking the Go button. However, typing in a date (say, modifying 2022
with 2012
through the keyboard) and leaving the field does not work: clicking Go will show an unchanged date.
The Go button shows the currently set value viadatetimepicker('viewDate')
which is the internal value of the datetimepicker.
// Set up datetimepicker
$('#datetimepicker1').datetimepicker({
allowInputToggle: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true,
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'far fa-calendar-check-o',
clear: 'far fa-trash',
close: 'far fa-times'
}
});
// Handle button
$('#btnSubmit').click(function() {
$('#result').html($('#datetimepicker1').datetimepicker('viewDate').format('MM/DD/YYYY HH:mm'));
});
Exact steps:
2022
with 2012
directly in the field through the keyboard. Click Go: the date is unchanged. You can try either pressing Enter or just blurring the field: there is no result either way.Weirdly, replacing the Tempus Dominus CSS/JS import CDN JS 5.0.0 -> RawGit (which is 5.39.0)
https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0/js/tempusdominus-bootstrap-4.min.js
https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0/css/tempusdominus-bootstrap-4.min.css
to
https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js
https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css
fixed this issue! JSFiddle: https://jsfiddle.net/rg1vc3an/1/
It may not have been the change from 5.0.0->5.39.0, it may be that CDN JS has bad or buggy versions of tempusdominus-bootstrap-4
. Don't use the CDN JS links.