search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Non-reproducible problems with converting some "YYYY-MM-DD" date strings to DayPilot.Date

Asked by Katharina
7 months ago.

Hi there,

I am using the Scheduler component and more generally the Date object from DayPilot Pro React.

I recently encountered a problem where I tried to convert date strings in the format "YYYY-MM-DD" to DayPilot.Date objects:

[1] const originalDate = "2022-05-16";
[2] const dateObject = DayPilot.Date(originalDate);
[3] console.log(dateObject, typeof dateObject)
[4] dateObject.addDays(10);

The dateObject from line [2] would log as undefined on line [3], and consequently, line [4] then gave me the following error (in Chrome):

"TypeError: Cannot read properties of undefined (reading 'addDays')"

However, I realized that the "new" keyword was missing in line [2], and once added, it seems like the code now runs as expected:

[2] const dateObject = new DayPilot.Date(originalDate);

So far, so good. However, I have follow-up questions on this issue, since I don't completely understand it's behaviour in my code:

Weirdly, I encountered the problem described above when I tried to reproduce the bug in an isolated setting, but the original behaviour in the ComponentDidMount of my Scheduler component (where the bug first appeared) was somewhat different:

There, I get my originalDate string from an object property -- I verified that it is always a valid date string in the format "YYYY-MM-DD", so I could not think of a reason why this should behave differently -- and instead of undefined, the equivalent to line [3] would show that the date gets converted to a regular Object here, looking like this (nested objects shortened for readability):

{
"Global": {...},
"isKhtml": true,
"isIE": false,
"isIEQuirks": false,
"browser": {...},
"libs": {...},
"touch": {...},
"Stats": {...},
"Util": {...},
"Areas": {...},
"Http": {},
"DateUtil": {},
"ColorUtil": {},
"ModalStatic": {...},
"value": "2022-05-16T00:00:00"
}

Regardless, the equivalent to line [4] would still log the same error as before:

"TypeError: Cannot read properties of undefined (reading 'addDays')"

What is even more surprising is that this problem ONLY occurs in my Scheduler component if the date is after 2022-05-11, while dates before that are simply converted to DayPilot.Date objects without any errors (even without the "new" keyword).

When placing the exact code from my example in the Scheduler component right before the original bug, I get type undefined from line [3] and the same error from line [4] -- for any dates after 2022-05-01. Dates before this convert to DayPilot.Date perfectly fine. (Note that the date where it switches to causing errors is even different...)

Curiously, if I place the following line right before THAT (i.e., in the ComponentDidMount of the Scheduler component, before the original bug and example code), this yet again leads to different behaviour:

console.log(DayPilot.Date("2022-05-10"));

  • If the logged date's string is any day before 2022-05-02, this seems to cause no additional bugs (it logs a normal DayPilot.Date object)
  • If the logged date's string is 2022-05-02 or later, and the other buggy code snippets after this are set to dates that work (i.e., before 2022-05-02 or 2022-05-12, respectively), this causes strange unrelated-looking bugs way further down in the code that don't appear otherwise ("TypeError: Cannot read properties of null (reading 'rows')")
  • If the logged date's string is 2022-05-02 or later, and the other buggy code snippets after this are set to dates that DON'T work either, it causes the following error "TypeError: Cannot redefine property: ticks"

I apologize for this wall of text, but since this behaviour is really unintuitive for me and hard to reproduce, I wonder if anyone else has encountered similar problems, especially linked to changing behaviour depending on the date. I have to add that I am not highly proficient in React/Javascript, so if this makes sense to anyone with a better understanding of the languages, an explanation would be very much appreciated.

Thank you for taking the time to consider my problem!

Best,
Katharina

Answer posted by Dan Letecky [DayPilot]
7 months ago.

The following object:

{
"Global": {...},
"isKhtml": true,
"isIE": false,
"isIEQuirks": false,
"browser": {...},
"libs": {...},
"touch": {...},
"Stats": {...},
"Util": {...},
"Areas": {...},
"Http": {},
"DateUtil": {},
"ColorUtil": {},
"ModalStatic": {...},
"value": "2022-05-16T00:00:00"
}

looks like a mix of the DayPilot object and a DayPilot.Date object (Global, Http, and other properties are defined on DayPilot while "value" is set in the DayPilot.Date constructor).

It looks like you overwrite the DayPilot or DayPilot.Date somewhere by accident. Such operations are allowed in JavaScript and you need to be careful with that.

You might be able to find the problem by starting with a blank project (where I assume it works as expected) and adding your code piece by piece.

Generally, I would recommend switching the project to TypeScript. The TypeScript compiler would check the illegal operations for you.

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.