calendar_month

DatePicker

Pick a date with calendar UI.

DatePicker Examples

Copy-ready examples with live previews.

Basic usage (controlled value)

Recommended: keep the selected value in your state and update it on OK.

Live preview

Committed value

—

Birthday

import { useState } from "react";
import DatePicker from "@/packages/ui/src/_components/forms/date_picker/Datepicker";

export default function Example() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DatePicker
      label="Birthday"
      value={value}
      onChange={setValue}
    />
  );
}

Controlled open state (optional)

If you need external control (e.g. open from a button), pass open + onOpenChange.

Live preview

Start date

import { useState } from "react";
import DatePicker from "@/packages/ui/src/_components/forms/date_picker/Datepicker";

export default function Example() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState<Date | null>(new Date());

  return (
    <DatePicker
      label="Start date"
      value={value}
      onChange={setValue}
      open={open}
      onOpenChange={setOpen}
    />
  );
}

Draft vs committed value

The picker keeps an internal draft while open and only commits on OK.

Live preview

Tip: click days to change the draft, then press OK to commit.

Committed: 2026-01-05

Choose date

import { useState } from "react";
import DatePicker from "@/packages/ui/src/_components/forms/date_picker/Datepicker";

function formatDate(value: Date | null) {
  if (!value) return "—";
  return value.toISOString().slice(0, 10);
}

export default function Example() {
  const [value, setValue] = useState<Date | null>(new Date(2026, 0, 5));
  const [open, setOpen] = useState(false);

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <div>Committed: {formatDate(value)}</div>

      <button onClick={() => setOpen(true)}>Open</button>

      <DatePicker
        label="Choose date"
        value={value}
        onChange={setValue}
        open={open}
        onOpenChange={setOpen}
      />
    </div>
  );
}

Compact layout

Use compact when you need a smaller panel footprint.

Live preview

Compact

Compact mode adds is-compact and hides the large header section.

import { useState } from "react";
import DatePicker from "@/packages/ui/src/_components/forms/date_picker/Datepicker";

export default function Example() {
  const [value, setValue] = useState<Date | null>(new Date());

  return (
    <DatePicker
      label="Compact"
      value={value}
      onChange={setValue}
      compact
    />
  );
}

Initial month seed

When value is null/undefined, initialMonth decides what month is shown first.

Live preview

Trip date

When value is empty, initialMonth seeds the month shown when opening.

import { useMemo, useState } from "react";
import DatePicker from "@/packages/ui/src/_components/forms/date_picker/Datepicker";

export default function Example() {
  const [value, setValue] = useState<Date | null>(null);

  const initialMonth = useMemo(() => new Date(2030, 6, 1), []);

  return (
    <DatePicker
      label="Trip date"
      value={value}
      onChange={setValue}
      initialMonth={initialMonth}
    />
  );
}

Customizing the trigger Input

Use inputProps to pass extra props to the internal Input (label/value/onChange/type are managed by DatePicker).

Live preview

With icon

import { useState } from "react";
import DatePicker from "@/packages/ui/src/_components/forms/date_picker/Datepicker";
import Icon from "@/packages/ui/src/_components/icon/Icon";

export default function Example() {
  const [value, setValue] = useState<Date | null>(new Date());

  return (
    <DatePicker
      label="With icon"
      value={value}
      onChange={setValue}
      inputProps={{
        iconContent: <Icon name="Event" />,
        placeholder: "MM/DD/YYYY",
        helperText: "Opens on click / Enter / Space",
      }}
    />
  );
}

On this page

DatePicker Props

DatePicker — Props
Prop	Type	Required	Default	Description
value	Date \| null	No	undefined	Controlled selected value (recommended).
onChange	(next: Date \| null) => void	No	undefined	Called on OK with the current draft date (or null).
open	boolean	No	undefined	Controlled open state (optional). If omitted, the component manages open state internally.
onOpenChange	(open: boolean) => void	No	undefined	Notified whenever the component toggles open/closed (works in both controlled and uncontrolled modes).
label	string	No	"Date"	Label passed to the trigger Input.
compact	boolean	No	false	Enables compact layout (adds is-compact class; hides the large header section).
initialMonth	Date	No	undefined	Initial month seed when value is not provided.
inputProps	Omit<IInputProps, "label" \| "value" \| "onChange" \| "type">	No	undefined	Props merged into the internal Input (the trigger).
className	string	No	undefined	Extra classes appended to the date picker root panel.
customStyles	React.CSSProperties	No	undefined	Declared in the type, but not applied by the current implementation.