Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

231
Vistas
How can I include plain text in a date format string?

I am using <Statistic.Countdown /> from Ant design to display the dates.

I'd like to achieve a format like: "2 years, 4 months, 5 days HH:mm:ss"

I have format={"M months D HH:mm:ss"}, but of course this interprets the "m" in months as the symbol for minutes, and so on: 3 42onth36 25 17:42:36.

How could I achieve "3 months 25 days 17:42:36"?

Edit: Thanks to Samathingamajig I got this working. Now I'm wondering, how can I insert a newline? I tried the following, but of course the second line will just show the full countdown in HH:mm:ss

  <Countdown title="Countdown" value={date} format={"M [months] D [days]"}/>
  <Countdown title="" value={date} format={"HH:mm:ss"}/>

I've tried using \n and <br>, both plain and enclosed in square brackets, to no effect.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

If you look at the docs, it formats it the same as moment.js, and if you go to their documentation, you escape parts of the string with [ and ].

To have newline, we have to change the style.

style={{whiteSpace: "pre"}}
format={"M [months]\nD HH:mm:ss"}

https://codesandbox.io/s/countdown-antd-4-18-5-forked-soh98

about 4 years ago · Juan Pablo Isaza Denunciar

0

Try with single quotes like:

format={"M 'months' D HH:mm:ss"}

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda