如何在 Tempus Dominus datetimepicker 中修复“未捕获的类型错误：无法读取未定义的属性‘格式’”？

Question

I have used Tempus Dominus Bootstrap 4 for my date time picker. When user put invalid value on the input and focus out(click outside of the component), it gets Uncaught TypeError: Cannot read property 'format' of undefined .

But, expected behavior is like this: https://i.imgur.com/MWgrBkB.mp4

How to fix the error?

My Demo

Update: Issue wasn't generated for someone. Here is the way of generating the issue: https://i.imgur.com/F0BpgZQ.mp4

Answer 1

You can try this

$('.date-time-picker').datetimepicker
    ({
    format:'DD-MM-YYYY hh:mm',
    icons:{
    time:'far fa-clock'
    }
    })

Answer 2

If somebody face a similar issue take into account if you are initializing, set option, or get option from the datepicker:

https://tempusdominus.github.io/bootstrap-4/Options/

Note Initialize options as $('#datetimepicker').datetimepicker({ sideBySide: true, debug: true })

Note To set options use $('#datetimepicker').datetimepicker('sideBySide', true)

Note To get option value use $('#datetimepicker').datetimepicker('sideBySide')

In my case I was initializing the defaults icons in a common js file and initializing again (Initialize option) in a local js of the page. In the local js set options method should be used.

Answer 3

this Fix from github , it error from function _getLastPickedDate() in file tempusdominus-bootstrap-4.min.js step to fix

1. unmin file tempusdominus-bootstrap-4.min.js
2. find _getLastPickedDate()
3. replace with var lastDate = this._dates[this._getLastPickedDateIndex()]; if (typeof lastDate == "undefined" || lastDate == null) { lastDate = this.getMoment(); } return lastDate; var lastDate = this._dates[this._getLastPickedDateIndex()]; if (typeof lastDate == "undefined" || lastDate == null) { lastDate = this.getMoment(); } return lastDate;

cr. github