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' })}\n\n`;
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>
);
};
Sunday, 2 August
11:54 PM
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: :)
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' })}\n\n`;
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,
};
};
I have an idea for this. I will loop on while
and dynamic sleep with the difference between currentTime
and rounding in seconds of currentTime + 1 second
. You can refer to this script.
function getRealTime() { const currentTime = Date.now(); console.log(new Date(Math.round(currentTime / 1000) * 1000), currentTime); return (Math.floor(currentTime / 1000) + 1) * 1000 - currentTime; } (async function () { let reduceTime = 0; while (true) { reduceTime = getRealTime(); await sleep(reduceTime); } })() function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
import React from 'react' export default class RealTime extends React.Component { constructor(props) { super(props); this.timeElement = React.createRef(); } componentDidMount = () => { setInterval(this.setTime, 1000); } setTime = () => { let date = new Date(); this.timeElement.current.innerText = `${date.getHours()}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`; } render = () => { return ( <div ref={this.timeElement}></div> ) } }
import React from 'react';
import ReactDom from 'react-dom';
const date = new Date().toLocaleDateString();
const time = new Date().toLocaleTimeString();
ReactDom.render(
<>
<p>Today's date is {date}</p>
<p>Today's time is {time}</p>
</>
,
document.getElementById('root'));
Output
Today's date is 8/14/2020
Today's time is 7:42:01 PM
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.