53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
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;
|
|
};
|
|
|
|
export const CurrentTimeDisplay = () => {
|
|
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">
|
|
<GoClockFill /> {formatTime(currentTime)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const CurrentDateDisplay = () => {
|
|
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">
|
|
<FaCalendar /> {ExtractDateFormate(currentDate)}
|
|
</div>
|
|
);
|
|
};
|