72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import './BSTImer.scss';
|
|
|
|
import { ExtractDateFormate } from '../../../../Services/Others';
|
|
|
|
const useCurrentTime = () => {
|
|
const [currentTime, setCurrentTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => setCurrentTime(new Date()), 1000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return currentTime;
|
|
};
|
|
|
|
const LiveTimer = () => {
|
|
// Initialize state for current time
|
|
const [currentTime, setCurrentTime] = useState(new Date());
|
|
|
|
// useEffect to update the current time every second
|
|
useEffect(() => {
|
|
const timerID = setInterval(() => tick(), 1000);
|
|
|
|
// Cleanup function to clear interval when the component unmounts
|
|
return () => {
|
|
clearInterval(timerID);
|
|
};
|
|
}, []); // Empty dependency array means this effect runs once when the component mounts
|
|
|
|
// Function to update the current time
|
|
const tick = () => {
|
|
setCurrentTime(new Date());
|
|
};
|
|
|
|
// Format time to 12-hour format with AM/PM
|
|
const hours = String(currentTime.getHours() % 12 || 12).padStart(2, '0');
|
|
const minutes = String(currentTime.getMinutes()).padStart(2, '0');
|
|
const seconds = String(currentTime.getSeconds()).padStart(2, '0');
|
|
const ampm = currentTime.getHours() >= 12 ? 'PM' : 'AM';
|
|
|
|
return (
|
|
<div>
|
|
<p>
|
|
{hours}:{minutes}:{seconds} {ampm}
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LiveTimer;
|
|
|
|
export const TimeDisplay = () => {
|
|
const currentTime = useCurrentTime();
|
|
|
|
const formatTime = (date) =>
|
|
date.toLocaleTimeString('en-US', {
|
|
hour12: true,
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
});
|
|
|
|
return <div className="timedate">{formatTime(currentTime)}</div>;
|
|
};
|
|
|
|
export const DateDisplay = () => {
|
|
const currentDate = useCurrentTime();
|
|
|
|
return <div className="datesNew">{ExtractDateFormate(currentDate)}</div>;
|
|
};
|