Date Picker

A calendar popover for choosing dates — typeable, or a range, or with a time.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { DatePicker, type DateRange } from "@aile.sh/elia";

export function Example() {
  const [due, setDue] = useState<Date | null>(null);
  const [born, setBorn] = useState<Date | null>(new Date(1994, 2, 17));
  const [span, setSpan] = useState<DateRange>({ from: null, to: null });

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {/* click to pick */}
      <DatePicker value={due} onChange={setDue} placeholder="Due date" />

      {/* type it, or click the calendar — a birthday is 30 years of paging */}
      <DatePicker editable value={born} onChange={setBorn} />

      <DatePicker
        mode="range"
        value={span}
        onChange={setSpan}
        placeholder="Reporting period"
      />
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia