Date Picker

The Date Picker component allows users to select a single date or a date range via either an inline calendar (simple) or a dropdown popover (popover). It is powered by date-fns and react-day-picker, and is fully keyboard accessible.

Date Picker (Single Date)

Properties

Property	Type	Required	Default	Description
type	"date"	Yes	—	Identifies the field as a date picker
dateType	"simple" | "popover"	No	popover	Rendering mode
placeholder	string	No	”Select a date”	Placeholder text
showTime	boolean	No	false	Enable time selection
presets	Array<{ label: string; value: number }>	No	—	Quick-select buttons (value in days)

In addition to the common props shared by all fields.

dateType Modes

• popover (default): Muestra un botón que abre un popover con el calendario. Ideal para formularios compactos.
• simple: Muestra el calendario inline directamente en el formulario. Ideal para dashboards o cuando hay espacio disponible.

presets

Los presets permiten seleccionar rápidamente fechas comunes. El value representa el número de días desde hoy:

presets: [
  { label: "Hoy", value: 0 },
  { label: "Mañana", value: 1 },
  { label: "En 7 días", value: 7 },
  { label: "En 30 días", value: 30 },
];

Examples

Basic Date Picker

Un date picker básico dentro de un popover

basic-date.tsx

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const BasicDatePicker = createExampleForm({
  formId: "basic-date-picker",
  fields: {
    appointment: {
      type: "date",
      label: "Appointment Date",
      placeholder: "Select a date",
      dateType: "popover",
      schema: z.date(),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["appointment"],
    },
  },
});

Date Range Picker

El tipo daterange permite seleccionar un rango de fechas (fecha de inicio y fecha de fin).

Properties

Property	Type	Required	Default	Description
type	"daterange"	Yes	—	Identifica el campo como un date range picker
schema	z.ZodType	Yes	—	Esquema Zod para validación. Debe validar un objeto con from y to

Valor del Campo

El valor de un campo daterange es un objeto con la siguiente estructura:

{
  from: Date | undefined,
  to: Date | undefined
}

Ejemplo de Validación

import { z } from "zod";

{
  type: "daterange",
  label: "Rango de fechas",
  schema: z.object({
    from: z.date(),
    to: z.date()
  }).refine((data) => {
    if (!data.from || !data.to) return false;
    return data.to >= data.from;
  }, {
    message: "La fecha de fin debe ser posterior a la fecha de inicio"
  })
}

Nota: El componente daterange está definido en los tipos pero puede requerir implementación adicional en versiones futuras. Consulta la documentación más reciente o el código fuente para verificar el estado actual de la implementación.

Best Practices

1. Usa placeholder descriptivo: Guía a los usuarios sobre el formato esperado
2. Elige el modo apropiado: Prefiere popover para layouts compactos; usa simple para dashboards
3. Valida correctamente: Siempre valida con z.date() para garantizar un objeto Date real
4. Proporciona presets: Añade presets para selecciones comunes (ej: “Hoy”, “Mañana”, “Esta semana”)
5. Considera timezone: Ten en cuenta las zonas horarias al trabajar con fechas
6. Para date ranges: Valida que la fecha de fin sea posterior a la de inicio

Accessibility

• Los roles y etiquetas ARIA se manejan internamente
• Navegación completa por teclado (flechas, Enter, Escape)
• Los lectores de pantalla anuncian las fechas seleccionadas/enfocadas
• Soporte completo para navegación con teclado en el calendario
• Compatible con lectores de pantalla principales

Dependencias

El componente Date Picker requiere las siguientes dependencias:

• date-fns (^4.1.0) - Para formateo y manipulación de fechas
• react-day-picker (^9.11.3) - Para el componente de calendario

Asegúrate de tener estas dependencias instaladas:

npm install date-fns react-day-picker

Next Steps

• Validation Guide - Para más sobre validación con Zod
• Fields Guide - Para ver todos los tipos de campos disponibles
• Form Layout Guide - Para layouts responsive