CODEWITHSUNDEEP
reactjsmomentjsantd
Ivana Murray
Ivana Murray

Reputation: 338

Antd countdown add html in the format of date

I'm using antd Statistic.Countdown with a date format. I would like to wrap each of the numbers with a div and inside there to be said days, hours, minutes, seconds etc. Is there an easy way to do that?

<Countdown className='countdown' value={deadline} format={`[<div>] DD [days</div>] [<div>] HH [hours </div>] [<div>] mm [Minutes </div>] [<div>] ss [seconds</div>]`} />

What I'm trying to achieve is have all the numbers on one line and the tag (days, hours, min and sec) centered underneath each number. Is there an easy way to do that?

Upvotes: 1

Views: 1157

Answers (2)

Elżbieta Malinowska
Elżbieta Malinowska

Reputation: 1

In antd 5 ref doesn't work anymore. So I found another solution. It's not perfect, but enough for me:

const [currentTime, setCurrentTime] = useState<number>(0);

const getFormat = () => {
  if (!currentTime) return 'D [days] H [hours] m [mins] s [secs]';

  const days = Math.floor(currentTime / (1000 * 60 * 60 * 24));
  const hours = Math.floor((currentTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((currentTime % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((currentTime % (1000 * 60)) / 1000);

  const suffix = (v: Number) => (v !== 1 ? 's' : '');

  const showDays = Boolean(days) ? `D [day${suffix(days)}]` : '';
  const showHours = Boolean(hours) ? `H [hour${suffix(hours)}]` : '';
  const showMins = Boolean(minutes) ? `m [minute${suffix(minutes)}]` : '';
  const showSecs = Boolean(!days && !hours) ? `s [second${suffix(seconds)}]` : '';

  return `${showDays} ${showHours} ${showMins} ${showSecs}`;
};

const onCountdownChange = value => setCurrentTime(value);

<Countdown
  value={new Date(data.expires_at).getTime()}
  format={getFormat()}
  onChange={onCountdownChange}
/>

Upvotes: 0

Saeed Shamloo
Saeed Shamloo

Reputation: 6574

If you take a look at source of CountDown component Here, you can see that it actually is using Statistic component with custom formatter prop, so right now we can not use formatter prop, but since CountDown is a class component, we can override the default formatter by using React.ref, I've implemented an example Here on StackBlitz, you can check it out.

I think It would be better if you open an issue in antd's github and ask them to add ability to CountDown component to accept formatter prop.

Upvotes: 2

Related Questions