Date picker

"use client";

import { DatePicker } from "@/registry/ds/date-picker";

const weekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6;

export default function DatePickerStates() {
  return (
    <div className="grid w-full max-w-xl gap-5 sm:grid-cols-2">
      <DatePicker label="Inicio de cursada" defaultValue={new Date(2026, 2, 9)} min={new Date(2026, 2, 1)} max={new Date(2026, 5, 30)} isDateDisabled={weekend} hint="Solo días hábiles entre marzo y junio." />
      <DatePicker label="Con error" defaultValue={new Date(2026, 3, 10)} error="Tiene que ser posterior al inicio." />
      <DatePicker label="Deshabilitado" defaultValue={new Date(2026, 0, 15)} disabled />
      <DatePicker size="sm" label="Compacto" />
    </div>
  );
}

"use client";

import { useState } from "react";
import { Calendar, type CalendarRange } from "@/registry/ds/calendar";
import { formatDate } from "@/registry/ds/date-picker";

export default function CalendarRangeExample() {
  const [range, setRange] = useState<CalendarRange>({ from: new Date(2026, 9, 6), to: new Date(2026, 9, 10) });
  return (
    <div className="flex flex-col items-center gap-4">
      <Calendar mode="range" value={range} onChange={setRange} aria-label="Período de examen" />
      <p className="text-sm text-fg-muted" aria-live="polite">
        {range.from ? formatDate(range.from) : "—"} → {range.to ? formatDate(range.to) : "…"}
      </p>
    </div>
  );
}