Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading