Question

96

How to show time and date in realtime in React JS?

rated 0 times [ 102] [ 6] / answers: 1 / hits: 37193 / 4 Years ago, sun, august 2, 2020, 12:00:00

Briefing:

Hi, I have created a hook useDate() to display current time and date as follows:

interface ReturnDate {

  time: string;

  date: string;

  wish: string;

}



export const useDate = (): ReturnDate => {

  const locale = 'en';

  const today = new Date();



  const day = today.toLocaleDateString(locale, { weekday: 'long' });

  const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}nn`;



  const hour = today.getHours();

  const wish = `Good ${(hour < 12 && 'Morning') || (hour < 17 && 'Afternoon') || 'Evening'}, `;



  const time = today.toLocaleTimeString(locale, { hour: 'numeric', hour12: true, minute: 'numeric' });



  return {

    date,

    time,

    wish,

  };

};

And I'm using it in my component below as follows:

const ProfileGreetings: FC = () => {

  const { firstName } = useUserDetails();

  const { date, time, wish } = useDate();



  return (

    <div className="greetings-container">

      <h1>

        {wish}

        <PrimaryText text={`${firstName || ''}!`} />

      </h1>



      <div>

        <h3>

          {date}

          <br />

          {time}

        </h3>

      </div>

    </div>

  );

};

Date/Time format in app:

Sunday, 2 August

11:54 PM

Problem Statement:

Currently what's happening is that the date and time don't update until I refresh the page. Is there any way to have all of the following to be updated in real time?

I am thinking to use an interval after every 1 minute to compute the updated time and date, but don’t really know if that's good idea. Neither do I know how to start with that and how will the interval be cleared?

Thanks! :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

emiliano

Add To Favorites

Follow

Total Points: 381

Total Questions: 109

Total Answers: 93

Location: Jersey

Member since Fri, Oct 1, 2021

3 Years ago

answered 4 Years ago daijac · Accepted Answer

Since you can use hooks in custom hooks you can create an interval to update every minute like this:



export const useDate = () => {

  const locale = 'en';

  const [today, setDate] = React.useState(new Date()); // Save the current date to be able to trigger an update



  React.useEffect(() => {

      const timer = setInterval(() => { // Creates an interval which will update the current data every minute

      // This will trigger a rerender every component that uses the useDate hook.

      setDate(new Date());

    }, 60 * 1000);

    return () => {

      clearInterval(timer); // Return a funtion to clear the timer so that it will stop being called on unmount

    }

  }, []);



  const day = today.toLocaleDateString(locale, { weekday: 'long' });

  const date = `${day}, ${today.getDate()} ${today.toLocaleDateString(locale, { month: 'long' })}nn`;



  const hour = today.getHours();

  const wish = `Good ${(hour < 12 && 'Morning') || (hour < 17 && 'Afternoon') || 'Evening'}, `;



  const time = today.toLocaleTimeString(locale, { hour: 'numeric', hour12: true, minute: 'numeric' });



  return {

    date,

    time,

    wish,

  };

};