简体   繁体   中英

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 via datetimepicker('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.

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM