Date formatting

Hello @Teodor

I am creating booking system …
I get an error when I’m doing the date time (dmx formatter until hours) and I do not understand why this is the cause of the error. Could you help with the cause and solution of the problem?
Please watch the video to see the error.

error.mp4 (5.9 MB)

Too many console error after checkin-checkout filter ( the error is in the second or third try. )

It is hard to answer your question by just looking at the console. It could be many different reasons - maybe you are using some of the data formatters wrongly / on a wrong data type.

this is my formatter syntax

{{(form_oda_sorgula.rezrevasyon_baslangic.value.formatDate(“dd-MM-yyyy HH:mm”)).hoursUntil(form_oda_sorgula.rezervasyon_bitis.value.formatDate(“dd-MM-yyyy HH:mm”))}}

The first trial also works fine.

and this is my console logs …

string.js:446 Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at t (string.js:446)
    at n.hoursUntil (string.js:330)
    at parser.js:734
    at parser.js:439
    at Object.dmx.parse (parser.js:435)
    at parser.js:415
    at String.replace (<anonymous>)
    at Object.dmx.parse (parser.js:414)
    at n.<anonymous> (BaseComponent.js:303)
    at Array.forEach (<anonymous>)
t @ string.js:446
hoursUntil @ string.js:330
(anonymous) @ parser.js:734
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ parser.js:415
dmx.parse @ parser.js:414
(anonymous) @ BaseComponent.js:303
$updateBindings @ BaseComponent.js:300
$update @ BaseComponent.js:286
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
updateData @ formElement.js:88
(anonymous) @ appConnect.js:224
setTimeout (async)
(anonymous) @ appConnect.js:220
update @ formElement.js:79
$update @ BaseComponent.js:290
(anonymous) @ BaseComponent.js:294
$update @ BaseComponent.js:291
(anonymous) @ BaseComponent.js:294
$update @ BaseComponent.js:291
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
updated @ radio.js:53
$update @ BaseComponent.js:298
(anonymous) @ BaseComponent.js:294
$update @ BaseComponent.js:291
(anonymous) @ BaseComponent.js:294
$update @ BaseComponent.js:291
(anonymous) @ BaseComponent.js:294
$update @ BaseComponent.js:291
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
updateData @ radio.js:53
(anonymous) @ appConnect.js:224
setTimeout (async)
(anonymous) @ appConnect.js:220
setValue @ formElement.js:104
setValue @ formElement.js:40
data.(anonymous function) @ BaseComponent.js:429
(anonymous) @ parser.js:734
t @ parser.js:435
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ radio.js:53
n @ appConnect.js:267
dispatch @ vendors.min.js:3
q.handle @ vendors.min.js:3
2string.js:446 Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at t (string.js:446)
    at n.hoursUntil (string.js:330)
    at parser.js:734
    at parser.js:439
    at Object.dmx.parse (parser.js:435)
    at parser.js:415
    at String.replace (<anonymous>)
    at Object.dmx.parse (parser.js:414)
    at n.<anonymous> (BaseComponent.js:303)
    at Array.forEach (<anonymous>)
t @ string.js:446
hoursUntil @ string.js:330
(anonymous) @ parser.js:734
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ parser.js:415
dmx.parse @ parser.js:414
(anonymous) @ BaseComponent.js:303
$updateBindings @ BaseComponent.js:300
$update @ BaseComponent.js:286
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
(anonymous) @ radio.js:53
XMLHttpRequest.send (async)
fetch @ radio.js:53
(anonymous) @ appConnect.js:224
setTimeout (async)
(anonymous) @ appConnect.js:220
load @ radio.js:53
data.(anonymous function) @ BaseComponent.js:429
(anonymous) @ parser.js:734
t @ parser.js:435
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ radio.js:53
n @ appConnect.js:267
dispatch @ vendors.min.js:3
q.handle @ vendors.min.js:3
2string.js:446 Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at t (string.js:446)
    at n.hoursUntil (string.js:330)
    at parser.js:734
    at parser.js:439
    at Object.dmx.parse (parser.js:435)
    at parser.js:415
    at String.replace (<anonymous>)
    at Object.dmx.parse (parser.js:414)
    at n.<anonymous> (BaseComponent.js:303)
    at Array.forEach (<anonymous>)
t @ string.js:446
hoursUntil @ string.js:330
(anonymous) @ parser.js:734
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ parser.js:415
dmx.parse @ parser.js:414
(anonymous) @ BaseComponent.js:303
$updateBindings @ BaseComponent.js:300
$update @ BaseComponent.js:286
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
dmx.validate @ validate.js:84
updateData @ formElement.js:81
updateData @ radio.js:53
(anonymous) @ appConnect.js:224
setTimeout (async)
(anonymous) @ appConnect.js:220
ListPicker._handleMouseUp
string.js:446 Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at t (string.js:446)
    at n.hoursUntil (string.js:330)
    at parser.js:734
    at parser.js:439
    at Object.dmx.parse (parser.js:435)
    at parser.js:415
    at String.replace (<anonymous>)
    at Object.dmx.parse (parser.js:414)
    at n.<anonymous> (BaseComponent.js:303)
    at Array.forEach (<anonymous>)
t @ string.js:446
hoursUntil @ string.js:330
(anonymous) @ parser.js:734
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ parser.js:415
dmx.parse @ parser.js:414
(anonymous) @ BaseComponent.js:303
$updateBindings @ BaseComponent.js:300
$update @ BaseComponent.js:286
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
set @ BaseComponent.js:510
_reset @ radio.js:53
fetch @ radio.js:53
(anonymous) @ appConnect.js:224
setTimeout (async)
(anonymous) @ appConnect.js:220
load @ radio.js:53
data.(anonymous function) @ BaseComponent.js:429
(anonymous) @ parser.js:734
t @ parser.js:435
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ radio.js:53
n @ appConnect.js:267
dispatch @ vendors.min.js:3
q.handle @ vendors.min.js:3
2string.js:446 Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at t (string.js:446)
    at n.hoursUntil (string.js:330)
    at parser.js:734
    at parser.js:439
    at Object.dmx.parse (parser.js:435)
    at parser.js:415
    at String.replace (<anonymous>)
    at Object.dmx.parse (parser.js:414)
    at n.<anonymous> (BaseComponent.js:303)
    at Array.forEach (<anonymous>)
t @ string.js:446
hoursUntil @ string.js:330
(anonymous) @ parser.js:734
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ parser.js:415
dmx.parse @ parser.js:414
(anonymous) @ BaseComponent.js:303
$updateBindings @ BaseComponent.js:300
$update @ BaseComponent.js:286
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
(anonymous) @ radio.js:53
XMLHttpRequest.send (async)
fetch @ radio.js:53
(anonymous) @ appConnect.js:224
setTimeout (async)
(anonymous) @ appConnect.js:220
load @ radio.js:53
data.(anonymous function) @ BaseComponent.js:429
(anonymous) @ parser.js:734
t @ parser.js:435
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ radio.js:53
n @ appConnect.js:267
dispatch @ vendors.min.js:3
q.handle @ vendors.min.js:3
string.js:446 Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at t (string.js:446)
    at n.hoursUntil (string.js:330)
    at parser.js:734
    at parser.js:439
    at Object.dmx.parse (parser.js:435)
    at parser.js:415
    at String.replace (<anonymous>)
    at Object.dmx.parse (parser.js:414)
    at n.<anonymous> (BaseComponent.js:303)
    at Array.forEach (<anonymous>)
t @ string.js:446
hoursUntil @ string.js:330
(anonymous) @ parser.js:734
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ parser.js:415
dmx.parse @ parser.js:414
(anonymous) @ BaseComponent.js:303
$updateBindings @ BaseComponent.js:300
$update @ BaseComponent.js:286
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
set @ BaseComponent.js:510
_reset @ radio.js:53
fetch @ radio.js:53
(anonymous) @ appConnect.js:224
setTimeout (async)
(anonymous) @ appConnect.js:220
load @ radio.js:53
data.(anonymous function) @ BaseComponent.js:429
(anonymous) @ parser.js:734
t @ parser.js:435
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ radio.js:53
n @ appConnect.js:267
dispatch @ vendors.min.js:3
q.handle @ vendors.min.js:3
2string.js:446 Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at t (string.js:446)
    at n.hoursUntil (string.js:330)
    at parser.js:734
    at parser.js:439
    at Object.dmx.parse (parser.js:435)
    at parser.js:415
    at String.replace (<anonymous>)
    at Object.dmx.parse (parser.js:414)
    at n.<anonymous> (BaseComponent.js:303)
    at Array.forEach (<anonymous>)
t @ string.js:446
hoursUntil @ string.js:330
(anonymous) @ parser.js:734
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ parser.js:415
dmx.parse @ parser.js:414
(anonymous) @ BaseComponent.js:303
$updateBindings @ BaseComponent.js:300
$update @ BaseComponent.js:286
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
(anonymous) @ radio.js:53
XMLHttpRequest.send (async)
fetch @ radio.js:53
(anonymous) @ appConnect.js:224
setTimeout (async)
(anonymous) @ appConnect.js:220
load @ radio.js:53
data.(anonymous function) @ BaseComponent.js:429
(anonymous) @ parser.js:734
t @ parser.js:435
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ radio.js:53
n @ appConnect.js:267
dispatch @ vendors.min.js:3
q.handle @ vendors.min.js:3
string.js:446 Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at t (string.js:446)
    at n.hoursUntil (string.js:330)
    at parser.js:734
    at parser.js:439
    at Object.dmx.parse (parser.js:435)
    at parser.js:415
    at String.replace (<anonymous>)
    at Object.dmx.parse (parser.js:414)
    at n.<anonymous> (BaseComponent.js:303)
    at Array.forEach (<anonymous>)
t @ string.js:446
hoursUntil @ string.js:330
(anonymous) @ parser.js:734
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ parser.js:415
dmx.parse @ parser.js:414
(anonymous) @ BaseComponent.js:303
$updateBindings @ BaseComponent.js:300
$update @ BaseComponent.js:286
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
set @ BaseComponent.js:510
_reset @ radio.js:53
fetch @ radio.js:53
(anonymous) @ appConnect.js:224
setTimeout (async)
(anonymous) @ appConnect.js:220
load @ radio.js:53
data.(anonymous function) @ BaseComponent.js:429
(anonymous) @ parser.js:734
t @ parser.js:435
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ radio.js:53
n @ appConnect.js:267
dispatch @ vendors.min.js:3
q.handle @ vendors.min.js:3
2string.js:446 Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at t (string.js:446)
    at n.hoursUntil (string.js:330)
    at parser.js:734
    at parser.js:439
    at Object.dmx.parse (parser.js:435)
    at parser.js:415
    at String.replace (<anonymous>)
    at Object.dmx.parse (parser.js:414)
    at n.<anonymous> (BaseComponent.js:303)
    at Array.forEach (<anonymous>)
t @ string.js:446
hoursUntil @ string.js:330
(anonymous) @ parser.js:734
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ parser.js:415
dmx.parse @ parser.js:414
(anonymous) @ BaseComponent.js:303
$updateBindings @ BaseComponent.js:300
$update @ BaseComponent.js:286
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
(anonymous) @ radio.js:53
XMLHttpRequest.send (async)
fetch @ radio.js:53
(anonymous) @ appConnect.js:224
setTimeout (async)
(anonymous) @ appConnect.js:220
load @ radio.js:53
data.(anonymous function) @ BaseComponent.js:429
(anonymous) @ parser.js:734
t @ parser.js:435
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ radio.js:53
n @ appConnect.js:267
dispatch @ vendors.min.js:3
q.handle @ vendors.min.js:3
2string.js:446 Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at t (string.js:446)
    at n.hoursUntil (string.js:330)
    at parser.js:734
    at parser.js:439
    at Object.dmx.parse (parser.js:435)
    at parser.js:415
    at String.replace (<anonymous>)
    at Object.dmx.parse (parser.js:414)
    at n.<anonymous> (BaseComponent.js:303)
    at Array.forEach (<anonymous>)
t @ string.js:446
hoursUntil @ string.js:330
(anonymous) @ parser.js:734
(anonymous) @ parser.js:439
dmx.parse @ parser.js:435
(anonymous) @ parser.js:415
dmx.parse @ parser.js:414
(anonymous) @ BaseComponent.js:303
$updateBindings @ BaseComponent.js:300
$update @ BaseComponent.js:286
(anonymous) @ appConnect.js:210
(anonymous) @ appConnect.js:180
postMessage (async)
dmx.nextTick @ appConnect.js:186
(anonymous) @ appConnect.js:207
set @ BaseComponent.js:498
update @ browser.js:71

Serhat - why are you first formatting the date for output and then calculate with it??
You can only calculate with ISO formatted dates - so make sure you do formatDate as last.

Again formateDate - is to make nice date to the user only.

1 Like

Because the Turkish date format is dd-MM-yyyy. For this reason I had to format it.

The problem is, everything works perfectly after the page loads. But after a few attempts, the error occurs.

So you have the input date in turkish format? You should make sure it is an ISO date format.
Usually if you use the html5 datetime input control it automatically makes ISO date.

If you are using different picker make sure it saves the ISO date and not what the user entered.

thank you @George
I will try again and give information…