Date Picker

"use client";
import { DatePicker } from "@g4rcez/components";

function BasicDatePicker() {
  return (
    <DatePicker
      name="birth-date"
      title="Birth date"
      placeholder="Select a date"
      required
    />
  );
}

"use client";
import { useState } from "react";
import { DatePicker } from "@g4rcez/components";

function ControlledDatePicker() {
  const [date, setDate] = useState<Date | undefined>(undefined);
  return (
    <div className="flex flex-col gap-2">
      <DatePicker
        name="event-date"
        title="Event date"
        date={date}
        onChange={setDate}
        clickToClose
        required
      />
      {date && (
        <p className="text-sm text-secondary">
          Selected: {date.toLocaleDateString()}
        </p>
      )}
    </div>
  );
}

"use client";
import { useState } from "react";
import { DatePicker, type DateRangeValue } from "@g4rcez/components";

function RangeDatePicker() {
  const [range, setRange] = useState<DateRangeValue | null>(null);

  return (
    <DatePicker
      name="report-period"
      title="Report period"
      type="range"
      range={range}
      onChange={setRange}
      labelRange={{ from: "Start date", to: "End date" }}
    />
  );
}

"use client";
import { DatePicker } from "@g4rcez/components";

function LocalizedDatePicker() {
  return (
    <DatePicker
      name="periodo"
      title="Período"
      type="range"
      range={{}}
      rangeLabels={{
        searchPlaceholder: "Atalhos de período",
        today: "Hoje",
        cancel: "Cancelar",
        apply: "Aplicar",
      }}
    />
  );
}

"use client";
import { useState } from "react";
import { DatePicker, type DateRangeValue } from "@g4rcez/components";

const subDays = (date: Date, days: number) => {
  const next = new Date(date);
  next.setDate(next.getDate() - days);
  return next;
};

function CustomPresetDatePicker() {
  const [range, setRange] = useState<DateRangeValue | null>(null);

  return (
    <DatePicker
      name="analytics-window"
      title="Analytics window"
      type="range"
      range={range}
      onChange={setRange}
      rangePresets={[
        { label: "Last 14 days", range: (today) => ({ from: subDays(today, 13), to: today }) },
        { label: "Last 90 days", range: (today) => ({ from: subDays(today, 89), to: today }) },
        { label: "Launch week", range: { from: new Date(2026, 6, 1), to: new Date(2026, 6, 7) } },
      ]}
    />
  );
}

"use client";
import { DatePicker } from "@g4rcez/components";

function InlineDatePicker() {
  return (
    <DatePicker
      name="check-in"
      title="Check-in date"
      floating={false}
      required
    />
  );
}