DatePicker

Calendario custom de Targ-Apps-Finance — reemplaza inputs nativos type="date" con UI minimalista y locale español.

Política

Targ-Apps-Finance no usa <input type="date">. Todas las fechas de formularios y filtros pasan por el componente DatePicker (src/components/DatePicker.js).

Los valores siguen el contrato de logic/utils/dates.js: cadenas ISO locales YYYY-MM-DD (misma semántica que localDateKey()).

API

Prop	Tipo	Descripción
`value`	`string \| () => string`	Fecha seleccionada (`YYYY-MM-DD`) o vacío
`onChange`	`(ev) => void`	`ev.target.value` y `ev.target.name` (mismo patrón que `Select`)
`name`	`string`	Nombre de campo; emite `<input type="hidden">` para formularios
`id`	`string`	`id` del trigger
`min` / `max`	`string`	Límites inclusivos (`YYYY-MM-DD`)
`disabled`	`boolean \| () => boolean`	Deshabilita el trigger
`invalid`	`boolean \| () => boolean`	Borde/outline destructivo
`required`	`boolean \| () => boolean`	`required` en el hidden input
`placeholder`	`string`	Texto cuando no hay valor (default: «Seleccionar fecha…»)
`class`	`string`	Clases extra en el wrapper
`aria-labelledby`	`string`	Asociación con `<label>` externo

Con `FormField`

e(FormField, {
  label: "Fecha",
  name: "date",
  variant: "date",
  value: date,
  onChange: (ev) => onDateChange(ev.target.value),
  min: "2024-01-01",
  required: true,
  error: () => fieldError("date"),
})

FormField delega en DatePicker cuando variant === "date".

Uso directo (filtros)

import { DatePicker } from "../src/components/DatePicker.js";

e(DatePicker, {
  id: "filterDateFrom",
  name: "filterDateFrom",
  value: filterDateFrom,
  onChange: (ev) => onDateFromChange(ev.target.value),
})

Comportamiento

Aspecto	Detalle
Locale	Español (`Intl.DateTimeFormat("es")`) para mes, día y cabecera
Semana	Lunes como primer día (`weekStartsOn: 1`)
Teclado	Trigger: Enter/Espacio/↓ abre; panel: flechas, Home/End, PageUp/Down (±mes / ±año con Shift), Tab con focus trap, Escape cierra
Animación	`animateSelectOpen` / `animateSelectClose` (misma familia que `Select`)
Motion	`prefers-reduced-motion: reduce` — panel sin fade animado
Móvil	Targets ≥ 44px en trigger y celdas
Modal	`.taf-date-picker-panel--fixed` en todo contexto (mismo patrón que `Select`; evita recorte en modal y `.taf-main-card`)
z-index	Panel y ancestros `:has(.taf-date-picker--open)` usan `--taf-z-select-open` (1300)

Estilos

Namespace en src/styles/finance.css:

Clase	Uso
`.taf-date-picker`	Wrapper relativo
`.taf-date-picker-trigger`	Botón trigger (extiende `.taf-input`)
`.taf-date-picker-panel`	Panel calendario (hairline border, sin sombra pesada)
`.taf-date-picker-day--selected`	Día activo — fondo cobre `--cs-primary`
`.taf-date-picker-day--today`	Borde cobre sutil si no está seleccionado
`.taf-date-picker-day--focused`	Anillo de foco teclado

Utilidades

src/components/datePickerUtils.js — normalización ISO, grilla de 42 días, etiquetas de mes/semana, isDateDisabled. Tests en test/components/DatePicker.test.js.

Dónde se usa

Ubicación	Campo
`TransactionForm.js`	Fecha de transacción
`TransferForm.js`	Fecha de transferencia
`TransactionFilters.js`	Filtros «Desde» / «Hasta»
`pages/RecurringTransactions.js`	Fecha de inicio de regla recurrente

DatePicker

On this page