95 lines
2.4 KiB
JavaScript
95 lines
2.4 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import './BSTImer.scss';
|
|
import { FaCalendar } from "react-icons/fa";
|
|
import { GoClockFill } from "react-icons/go";
|
|
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();
|
|
|
|
// const formatDate = (date) => {
|
|
// const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
// const months = [
|
|
// "Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
|
// "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
|
|
// ];
|
|
// return `${days[date.getDay()]} ${date.getDate()} ${months[date.getMonth()]}`;
|
|
// };
|
|
|
|
return (
|
|
<div className="datesNew">
|
|
{ExtractDateFormate(currentDate)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
|