Javascript date constructor override?

Question

I am developing a browser application that is sensitive to the current date.

Throughout the application code, I call new Date and perform calculations based on the current time and accordingly render the view.

To test my application for different potential calendar days, I would have to constantly change the system clock for the past or the future, which is annoying and probably not suitable for my computer.

Therefore, for testing purposes (I would never use this code in the production process), I decided to override the built-in Date constructor by running this in the console:

 // create a date object for this Friday: var d = new Date(2012, 0, 20) //override Date constructor so all newly constructed dates return this Friday Date = function(){return d} 

Given this assumption, I tried this and got weird results:

 var now = new Date Sat Apr 07 2012 00:00:00 GMT-0400 (EDT) now = new Date Tue Jul 10 2012 00:00:00 GMT-0400 (EDT) now = new Date Wed Jul 09 2014 00:00:00 GMT-0400 (EDT) now = new Date Wed Jun 07 2023 00:00:00 GMT-0400 (EDT) 

... etc....

My question is: what exactly is going on here?

If I override the constructor to return a static date, why does it give unrelated and ever-increasing dates?

Also, is there an efficient way to override the Date constructor to return a static date in the future, without having to use all the calls to create date instances in my code and modify the output?

Thanks in advance.

EDIT:

I tried my code in a new window and worked as expected.

It seems the culprit was the jQuery UI datepicker plugin, which called its "update" method. When I turn off its call, overriding the date works fine, but as soon as I use datepicker, the weird behavior above happens.

I don’t know why this popular plugin will somehow affect something global. If anyone has any ideas, let me know.

Sorry I didn’t figure out the true criminal before.

Answer 1

I checked your code:

 // create a date object for this Friday: var d = new Date(2012, 0, 20); //override Date constructor so all newly constructed dates return this Friday Date = function(){return d;}; var now = new Date() console.log(now); now = new Date() console.log(now); now = new Date() console.log(now); now = new Date() console.log(now); 

And the result ???? Why is it so different?

 Date {Fri Jan 20 2012 00:00:00 GMT+0700 (SE Asia Standard Time)} Date {Fri Jan 20 2012 00:00:00 GMT+0700 (SE Asia Standard Time)} Date {Fri Jan 20 2012 00:00:00 GMT+0700 (SE Asia Standard Time)} Date {Fri Jan 20 2012 00:00:00 GMT+0700 (SE Asia Standard Time)} 

---

EDIT:

I saw that whenever you interact with Date Picker, the behavior changes. Try another test, change now something like interacting with Date Picker:

 // create a date object for this Friday: var d = new Date(2012, 0, 20); //override Date constructor so all newly constructed dates return this Friday Date = function(){return d;}; var now = new Date(); var another = new Date(); console.log(now); another.setDate(13); now = new Date() console.log(now); 

And the result:

 Date {Fri Jan 20 2012 00:00:00 GMT+0700 (SE Asia Standard Time)} Date {Fri Jan 13 2012 00:00:00 GMT+0700 (SE Asia Standard Time)} 

So what went wrong? You have already redefined the Date Date function with

 Date = function(){return d;}; // after construction, all date will be d (2012-01-20) var now = new Date(); // you instantiate a date, but actually now variable is d (2012-01-20) var another = new Date(); // you instantiate a date, but another is still d (2012-01-20) another.setDate(13); // change another date to 13 is to change now to 13 (because now and another is still one d) now = new Date() // still d console.log(now); // print out now (2012-01-13) 

So, you redefine the Date Date function with a function that causes the whole date to use the same (only one) instance, which is d (2012-01-20). Changing any dates affects others.

Answer 2

I also ran into this problem and ended up writing a module for this. Maybe this is useful for someone:

Github: https://github.com/schickling/timemachine

 timemachine.config({ dateString: 'December 25, 1991 13:12:59' }); console.log(new Date()); // December 25, 1991 13:12:59 

Answer 3

Take a picture.

 var d = new Date(2012, 0, 20); // undefine date so that it will only return what your function returns Date = undefined; Date = function(){return d;} 

Modifying the prototype to point to your object should do the trick.

I believe that the strange behavior that you previously encountered was that Date confidentially adheres to some notion of time, and since the prototype points to this internal clock, you got random times.