Moodinary/UI

Date picker

Un campo de fecha (evento, fecha de una acción). Popover con Calendar.

El campo de fecha del dashboard: input type="date" nativo y confirmación escrita en es-AR. Conserva el selector del móvil y evita confundir día y mes cuando el sistema está en otro idioma.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/date-picker.json
import
import { DatePicker } from "@moodinary/ui/components/date-picker";

Ejemplos

Medir hasta

Replica DateField de las acciones. Empieza vacío y muestra “Sin fecha”; al elegir, la fecha se confirma debajo del control.

Sin fecha

Código
default.tsx
"use client";

import { DatePicker } from "@moodinary/ui/components/date-picker";
import { useState } from "react";

export default function DatePickerDefault() {
	const [date, setDate] = useState("");
	return (
		<DatePicker
			className="w-full max-w-[260px]"
			id="action-end"
			label="Medir hasta"
			onValueChange={setDate}
			value={date}
		/>
	);
}

Props

DatePicker

PropTipoDefaultDescripción
idstring-ID del control; si falta, se genera uno para asociar el label.
labelstring-Nombre visible del campo, obligatorio.
valuestring-Fecha local YYYY-MM-DD, o cadena vacía cuando no hay fecha.
onValueChange(value: string) => void-Recibe el valor ISO local del input nativo.
requiredbooleanfalseExige una fecha al enviar el formulario nativo.
classNamestring-Clases del contenedor de label, control y confirmación.

Cuándo sí y cuándo no

Hacé
  • Guardá la fecha como YYYY-MM-DD.
  • Dejá visible la confirmación escrita en es-AR.
  • Usá un label que explique para qué se elige la fecha.
Evitá
  • No reemplaces el selector nativo por un popover distinto al del app.
  • No conviertas una fecha local a UTC para guardarla.
  • No supongas que lang cambia el orden del input nativo.

Accesibilidad

  • El label se asocia al input mediante htmlFor e id.
  • El navegador resuelve teclado y selector nativo.
  • La confirmación usa aria-live polite para anunciar la fecha elegida.