bootstrap-4datetimepickerbootstrap-datetimepickertempus-dominus-datetimepicker

Tempus Dominus (Datetimepicker for Bootstrap 4): Manual input of date through keyboard not working

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:

  1. First select any date through the GUI calendar, click Go, verify it shows up.
  2. Repeat step #1 one more time; verify any GUI-selected date works.
  3. Now, replace the year 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.
Solution

  • 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.