---
title: "Fecha y hora en React"
slug: "react-dates"
category: "Patterns"
hosts: "react"
locale: "es"
---

# Fecha y hora en React

Los calendarios usan valores separados para días de calendario y horas. Así se evita que una vista interprete por error un timestamp Unix como hora del día.

## Día de calendario

`dateFrom`, `dateTo` y un `startDate` basado en fecha reciben milisegundos desde el epoch Unix. Los ejemplos generan el valor del día con `new Date(2026, 8, 17).getTime()`: septiembre tiene el índice `8` en el constructor de JavaScript.

En Calendar Grid, `dateSettings.month` es uno-based: septiembre es `9`.

## Hora y duración

`timeFrom` y `timeTo` son milisegundos desde el inicio del día: `9 * 60 * 60 * 1000` es las 09:00. Una hora de duración es `60 * 60 * 1000`.

Calendar Week usa `timeSettings.timeStart` y `timeSettings.duration` en la misma unidad para el rango visible. `dateSettings.duration` cuenta días. Los campos históricos `timeSettings.from` y `timeSettings.to` no se evalúan.

## Zonas horarias

Define en tu aplicación si los datos representan días locales o instantes globales. Convierte los timestamps del backend a la zona de visualización antes de pasarlos. Los ejemplos usan valores de día creados en local y `timeZoneBalance: 0`. Una corrección fija de horas no es una zona horaria completa con cambios de horario de verano.

Prueba sobre todo citas alrededor de medianoche y en los cambios de hora. Cadenas de fecha locales como `17.09.2026` sirven para mostrar, no como formato de intercambio.

## Editar y guardar

Para un guardado fiable, el ejemplo de calendario usa un formulario y valores de estado nuevos. Los callbacks de arrastre existentes informan el estado original, pero no todos los nuevos destinos. Por eso los ejemplos de calendario documentados van sin arrastrar y soltar.