Soy nuevo en React, así que necesito ayuda.
Entonces mi temporizador funciona. Pero necesito una cuenta regresiva desde la fecha actual hasta una fecha determinada (en mi situación hasta el 15/07/2022 a las 18:00), por lo que necesito días, horas, minutos y segundos hasta este evento. Por ahora solo agregué manualmente los números. ¿Cómo implementar eso, tal vez para usar Date()? Aquí está mi código:
const Timer = () => { const [minutes, setMinutes] = useState(30); const [seconds, setSeconds] = useState(60); useEffect(() => { let myInterval = setInterval(() => { if (seconds > 0) { setSeconds(seconds - 1); } if (seconds === 0) { if (minutes === 0) { clearInterval(myInterval); } else { setMinutes(minutes - 1); setSeconds(59); } } }, 1000); return () => { clearInterval(myInterval); }; }); return ( <Box > <Box > <Box display="flex" flexDirection={'column'} alignItems={'center'}> <Typography variant={'h3'} > 13 </Typography> <Typography > Days </Typography> </Box> <Box display="flex" flexDirection={'column'} alignItems={'center'}> <Typography variant={'h3'} > 09 </Typography> <Typography > Hours </Typography> </Box> <Box display="flex" flexDirection={'column'} alignItems={'center'}> <Typography variant={'h3'} > {minutes} </Typography> <Typography > Minute </Typography> </Box> <Box display="flex" flexDirection={'column'} alignItems={'center'}> <Typography variant={'h3'} > {seconds} </Typography> <Typography > Seconds </Typography> </Box> </Box> </Box> );};
Gracias a todos :) Realmente aprecié su ayuda :)
Puede crear un objeto de fecha y leer los valores que necesita de él.
const date = new Date(); console.log("date is: ", date); const dateObject = { year: date.getFullYear(), month: date.toLocaleString("en-US", { month: "long" }), day: date.getDate(), hours: date.getHours(), minutes: date.getMinutes(), seconds: date.getSeconds(), } console.log("print month value: ", dateObject.month); console.log("print all object values: ", dateObject);lo resuelvo
const [expiryTime, setExpiryTime] = useState("15 jul 2022 18:00:00"); const [countdownTime, setCountdownTime] = useState({ countdownDays: "", countdownHours: "", countdownlMinutes: "", countdownSeconds: "", }); const countdownTimer = () => { const timeInterval = setInterval(() => { const countdownDateTime = new Date(expiryTime).getTime(); const currentTime = new Date().getTime(); const remainingDayTime = countdownDateTime - currentTime; const totalDays = Math.floor(remainingDayTime / (1000 * 60 * 60 * 24)); const totalHours = Math.floor( (remainingDayTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) ); const totalMinutes = Math.floor( (remainingDayTime % (1000 * 60 * 60)) / (1000 * 60) ); const totalSeconds = Math.floor( (remainingDayTime % (1000 * 60)) / 1000 ); const runningCountdownTime = { countdownDays: totalDays, countdownHours: totalHours, countdownMinutes: totalMinutes, countdownSeconds: totalSeconds, }; setCountdownTime(runningCountdownTime); if (remainingDayTime < 0) { clearInterval(timeInterval); setExpiryTime(false); } }, 1000); }; useEffect(() => { countdownTimer(); });