Formato de fechas
Muestre fechas con las opciones de toLocaleDateString.
Formato de fechas es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Formato de fechas
JavaScript proporciona varios métodos integrados para convertir una fecha en texto legible, desde una salida adaptada a la configuración regional hasta cadenas ISO estandarizadas.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString())toISOString
toISOString devuelve una cadena estandarizada en UTC, ideal para almacenar e intercambiar datos porque no es ambigua.
const d = new Date(Date.UTC(2024, 0, 15, 10, 30, 0))
console.log(d.toISOString())Extracción de la cadena ISO
La cadena ISO coloca primero la fecha, por lo que puede extraer los primeros diez caracteres para obtener únicamente la fecha del calendario.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))toLocaleDateString
toLocaleDateString da formato a la parte de la fecha usando una configuración regional y produce una salida adecuada para la región.
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { timeZone: "UTC" })
console.log(typeof text)Argumento de configuración regional
El primer argumento es una etiqueta de configuración regional como en-US o de-DE, que cambia el orden y los separadores de la fecha con formato.
const d = new Date(Date.UTC(2024, 0, 15))
const us = d.toLocaleDateString("en-US", { timeZone: "UTC" })
const iso = d.toISOString().slice(0, 10)
console.log(typeof us, iso)Opciones de formato
Un objeto de opciones permite elegir cómo aparece cada parte, por ejemplo, con el nombre completo del mes o con un año numérico.
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", timeZone: "UTC" })
console.log(typeof text)toLocaleTimeString
toLocaleTimeString da formato únicamente a la parte de la hora y respeta la configuración regional y las opciones que proporcione.
const d = new Date(Date.UTC(2024, 0, 15, 14, 5, 0))
const text = d.toLocaleTimeString("en-US", { timeZone: "UTC" })
console.log(typeof text)toLocaleString
toLocaleString combina la fecha y la hora en una sola cadena localizada.
const d = new Date(Date.UTC(2024, 0, 15, 9, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)toDateString
toDateString proporciona una fecha fija en inglés y legible para las personas, sin opciones de configuración regional; resulta útil para registros rápidos.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof d.toDateString())Intl.DateTimeFormat
Para aplicar formato repetidamente, Intl.DateTimeFormat crea un objeto formateador reutilizable, que es más eficaz que llamar muchas veces a los métodos de configuración regional.
const fmt = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", dateStyle: "medium" })
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof fmt.format(d))Elección del formato
Use cadenas ISO para almacenamiento y API, y métodos de configuración regional para mostrar información a usuarios de su región. Mantenga separadas estas responsabilidades.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))Comprobación rápida
Compruebe sus conocimientos sobre el formato.
Resumen
Resumen: Elija el método de formato adecuado para cada tarea.
- toISOString para almacenamiento y API
- toLocaleDateString y métodos relacionados para mostrar información al usuario
- Las opciones controlan los nombres de los meses y los formatos numéricos
- Intl.DateTimeFormat es eficaz para aplicar formato repetidamente
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))Preguntas frecuentes
¿La lección «Formato de fechas» es gratis?
Sí — el texto completo de «Formato de fechas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Formato de fechas»?
Muestre fechas con las opciones de toLocaleDateString. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Formato de fechas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Creación y lectura de fechas
- Marcas de tiempo y operaciones con fechas
- Formato de fechas
- Zonas horarias y UTC