css Question posted in
Some basic documentation can be found here.

Css – 3 Digit Number In DaisyUI / Next.Js Countdown Not Displaying

So I’m a countdown for a Next.js website and am using the daisyUI countdown component but any digit above 99 for the number of days is not rendering properly as seen below:

enter image description here
enter image description here

So initially I have a simple countdown:

 const targetDate = new Date('2024-09-01T07:00:00');

  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });


 
  useEffect(() => {
    const updateCountdown = () => {
      const currentTime = new Date();
      const difference = targetDate - currentTime;

      if (difference < 0) {
        clearInterval(intervalId);
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
 
      } else {
 
        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((difference % (1000 * 60)) / 1000);
        setTimeLeft({ days, hours, minutes, seconds });
      }
    };

    const intervalId = setInterval(updateCountdown, 1000);
    return () => clearInterval(intervalId);
  }, [targetDate]);

This is how I render the countdown

 <div className="grid grid-flow-col gap-5 text-center auto-cols-max">
          <div className="flex flex-col" style={{ marginBottom: '10px' }}>
            <span className="countdown font-mono text-5xl text-black">
           
              <span style={{ "--value": String(timeLeft.days).padStart(3, '0') }}>{String(timeLeft.days).padStart(3, '0')}</span>
            </span>
            days
          </div>
          <div className="flex flex-col">
            <span className="countdown font-mono text-5xl text-black">
              <span style={{ "--value": String(timeLeft.hours).padStart(2, '0') }}>{String(timeLeft.hours).padStart(2, '0')}</span>
            </span>
            hours
          </div>
          <div className="flex flex-col">
            <span className="countdown font-mono text-5xl text-black">
              <span style={{ "--value": String(timeLeft.minutes).padStart(2, '0') }}>{String(timeLeft.minutes).padStart(2, '0')}</span>
            </span>
            min
          </div>
          <div className="flex flex-col">
            <span className="countdown font-mono text-5xl text-black">
              <span style={{ "--value": String(timeLeft.seconds).padStart(2, '0') }}>{String(timeLeft.seconds).padStart(2, '0')}</span>
            </span>
            sec
          </div>

        </div>

I’ve added

String(timeLeft.seconds).padStart(3, '0')

as an attempt to fix this issue but to no avail

Any ideas on how to fix this?

Tags:

2

Answers


  1. 0

    The most likely reason is that your number now having 3 digits is causing it to render somewhere else that you can’t see. What’s in your countdown class?

    You also don’t need to use both --value and {..}, best to just stick with the interpolated:

     <div className="flex flex-col">
     <span className="countdown font-mono text-5xl text-black">
         {String(timeLeft.seconds).padStart(2, '0')}
     </span>
    sec
 </div>
    Login or Signup to reply.
  2. 0

    This is not an error; it’s the normal behavior of the DaisyUI countdown. It only goes up to 99.

    see: https://daisyui.com/components/countdown/

    enter image description here

    And of course, it has nothing to do with Next.js.

    Here is one which is not based on daisyUI but on Tailwind and React so will probably be useful:

    https://www.hover.dev/components/countdown

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search