Why is the date object acting correctly in one instance but not the other?

Question

I have a problem I cant wrap my head around. The Date string is acting different in two instances where I think I am doing the same thing.

SO in essence, when I assign new Date("Jan 25, 2023 15:37:25").getTime() to countDownDate, the timer here (controlled by setInterval), will start where I expect it based on the string literal that is input into the date constructor. This will persist to count even on refresh.

The problem is when I need to calculate a future time dynamically. ALl of a sudden, when I calculate a dynamic future time string:

    var timer = new Date().getTime() + 620840000;
    var date = new Date(timer);
    var dateStr = date.toString();
    var countDownDate new Date(dateStr).getTime()

this no longer persists on refresh.

Now I am aware that in general you need to store the time in localstorage or even a server to allow the time to persist. which makes sense. I also understand that the timer is being recalculated every time the component is mounted. However, arent I doing the same exact thing by putting a static string literal into the date constructor? If its a matter of setting and resetting, shouldnt the date constructor with the string literal act the same way as a dynamically calculated string? pull

code here: https://github.com/Cerezze/timerTest

import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';

function App() {

  useEffect(() => {
    var timer = new Date().getTime() + 620840000;
    var date = new Date(timer);
    var dateStr = date.toString();

    var countDownDate = new Date("Jan 25, 2023 15:37:25").getTime(); // <-- Why does this persist on refresh
    /*var countDownDate new Date(dateStr).getTime();*/               // <-- and this does not persist on refresh?
    
    const interval = setInterval(() => {
      var now = new Date().getTime();

      var distance = countDownDate - now;

      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      console.log(days, hours, minutes, seconds); 
    }, 1000);
    return (distance) => {
        if(distance < 0){
        clearInterval(interval);
        console.log('Expired');
      }
    }
  }, []);

  return (
    <div className="App">
    </div>
  );
}

export default App;

Re `new Date("Jan 25, 2023 15:37:25")`, see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) If you're going to store a string for later parsing, best to store a format supported by ECMA-262, or a time value (ms since epoch). — RobG, Jan 25 '23 at 05:33

score 1 · Accepted Answer · answered Jan 24 '23 at 16:54

1

If I understand your question, then the answer is that here

var timer = new Date().getTime() + 620840000;

you are creating a different date/time every time your javascript runs (new Date() will always be the present time according to the system clock)

var date = new Date(timer);
var dateStr = date.toString();

but here, you have a fixed date/time, which stays the same each time.

var countDownDate = new Date("Jan 25, 2023 15:37:25").getTime(); // <-- Why does this persist on refresh

Does that answer your question? I would have put this in a comment, but I wanted to show you in your code where I think your misunderstanding is

answered Jan 24 '23 at 16:54

ControlAltDel

33,923
10
53
80

I see. It's The object that is created anew everytime the calculation happens. I think that makes sense. But is there no way excecpt to store it outside the app to keep the time persistent? In the case of the time being dynamically calculated – chree Jan 24 '23 at 17:06
@chree Your best bet is to use localstorage, or if you have a backend you can set a cookie or save/retrieve it with a database – ControlAltDel Jan 24 '23 at 17:26

Why is the date object acting correctly in one instance but not the other?

1 Answers1