Usage

import { Calendar } from "@aqqo/aqqo-ui";

const [date, setDate] = useState(new Date(2024, 0, 20));

<Calendar
  mode="single"
  defaultMonth={date}
  selected={date}
  onSelect={(e) => {
    setDate(e);
  }}
/>;

Single

Month and year selection

const [date, setDate] = useState(new Date(2024, 0, 20));

<Calendar
  mode="single"
  required
  captionLayout="dropdown"
  defaultMonth={date}
  selected={date}
  onSelect={setDate}
/>;

Range

const [dates, setDates] = useState({
  from: new Date(2024, 0, 20),
  to: new Date(2024, 0, 20),
});

<Calendar
  mode="single"
  defaultMonth={dates}
  selected={date}
  onSelect={(e) => {
    setDates(e);
  }}
/>;

Date picker

const [date, setDate] = useState(new Date(2024, 0, 20));

<Popover>
  <Popover.Trigger asChild>
    <Button variant="secondary" className="... gap-3">
      <CalendarBlank weight="duotone" className="size-5" />
      {date ? date.toLocaleDateString() : "Pick a date"}
    </Button>
  </Popover.Trigger>
  <Popover.Content className="p-4">
    <Calendar
      mode="single"
      selected={date}
      onSelect={(e) => {
        setDate(e);
      }}
    />
  </Popover.Content>
</Popover>;

Props