DatePicker

Selector de fecha con calendario custom, accesible y alineado al design system. Soporte para rango mínimo/máximo — bloquea en el calendario las fechas fuera del rango. Sin dependencias externas.

pnpm dlx nuvo-ui add date-picker

Base

Selecciona la fecha en el calendario

const [date, setDate] = React.useState<string | undefined>()

<DatePicker
  label="Fecha de nacimiento"
  value={date}
  onChange={setDate}
  helperText="Selecciona la fecha en el calendario"
/>

Rango de fechas vinculado

Vincula dos DatePickers de modo que la fecha final nunca pueda ser anterior a la inicial, y la inicial nunca posterior a la final. El calendario bloquea automáticamente las fechas inválidas.

Las fechas posteriores a «Fin» quedan bloqueadas

Las fechas anteriores a «Inicio» quedan bloqueadas

const [from, setFrom] = React.useState<string | undefined>()
const [to,   setTo]   = React.useState<string | undefined>()

function handleFrom(v: string | undefined) {
  setFrom(v)
  // Si la fecha fin ya estaba y queda antes de la nueva inicio, la limpia
  if (v && to && to < v) setTo(undefined)
}

function handleTo(v: string | undefined) {
  setTo(v)
  // Si la fecha inicio ya estaba y queda después de la nueva fin, la limpia
  if (v && from && from > v) setFrom(undefined)
}

<DatePicker
  label="Fecha inicio"
  value={from}
  onChange={handleFrom}
  max={to}              // ← bloquea en el calendario todo lo posterior al fin
/>

<DatePicker
  label="Fecha fin"
  value={to}
  onChange={handleTo}
  min={from}            // ← bloquea en el calendario todo lo anterior al inicio
/>
Nota: Pasa max={to} en el campo inicio y min={from} en el campo fin. El calendario mostrará grises (sin hover, cursor bloqueado) todas las fechas fuera del rango permitido — el usuario no puede seleccionarlas.

Límites fijos de fecha

Usa min y max con valores estáticos para restringir a un período concreto.

Solo fechas dentro de 2025

<DatePicker
  label="Fecha de evento"
  min="2025-01-01"
  max="2025-12-31"
  helperText="Solo fechas dentro de 2025"
/>

Estado de error

<DatePicker
  label="Fecha requerida"
  errorMessage="Por favor selecciona una fecha válida."
/>

Props

PropTipoDefaultDescripción
labelstring—Etiqueta visible sobre el campo
valuestring—Fecha seleccionada en formato "yyyy-mm-dd" (modo controlado)
onChange(value: string | undefined) => void—Callback con la nueva fecha. Recibe undefined cuando el usuario pulsa "Borrar"
minstring—Fecha mínima seleccionable "yyyy-mm-dd". Las fechas anteriores aparecen deshabilitadas en el calendario. Úsalo con el valor de la fecha fin para vincular dos pickers.
maxstring—Fecha máxima seleccionable "yyyy-mm-dd". Las fechas posteriores aparecen deshabilitadas en el calendario. Úsalo con el valor de la fecha inicio para vincular dos pickers.
helperTextstring—Texto de ayuda bajo el campo (no se muestra si hay errorMessage)
errorMessagestring—Mensaje de error — activa el estado visual de error en el campo
requiredbooleanfalseMuestra asterisco (*) junto al label
disabledbooleanfalseDeshabilita el campo completamente