import { useState } from "react";
import { DatePicker } from "react-datetime-kit";
import "react-datetime-kit/styles.css";

export function App() {
  const [date, setDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      placeholder="Pick a date"
      clearable
    />
  );
}

import { DatePicker } from "react-datetime-kit";

<DatePicker
  value={date}
  onChange={setDate}
  minDate={new Date("2024-01-01")}
  maxDate={new Date("2026-12-31")}
  disabledDates={(d) => d.getDay() === 0} // disable Sundays
  weekStartsOn={1} // Monday-first calendar
  numberOfMonths={2} // two-month view
  showWeekNumbers
  clearable
  placeholder="Select a date"
/>;

{
  /* Inline / always-open variant */
}
<DatePicker inline value={date} onChange={setDate} />;

import { useState } from "react";
import { DateRangePicker } from "react-datetime-kit";
import type { DateRange } from "react-datetime-kit";

const [range, setRange] = useState<DateRange>({ start: null, end: null });

<DateRangePicker
  value={range}
  onChange={setRange}
  numberOfMonths={2}
  showDefaultPresets // Today, Yesterday, Last 7 days, Last 30 days,
  // This week, This month, Last month, This year
  clearable
/>;

{
  /* Custom presets */
}
<DateRangePicker
  value={range}
  onChange={setRange}
  presets={[
    {
      label: "Q1 2026",
      range: () => ({
        start: new Date(2026, 0, 1),
        end: new Date(2026, 2, 31),
      }),
    },
    {
      label: "Q2 2026",
      range: () => ({
        start: new Date(2026, 3, 1),
        end: new Date(2026, 5, 30),
      }),
    },
  ]}
/>;

import { TimePicker } from "react-datetime-kit";
import type { TimeValue } from "react-datetime-kit";

const [time, setTime] = useState<TimeValue | null>({ hours: 9, minutes: 30 });

<TimePicker
  value={time}
  onChange={setTime}
  hourFormat={12} // 12 or 24 (default: 24)
  minuteStep={5} // 1 | 5 | 15 | 30 …
  showSeconds // adds seconds column
  clearable
/>;

import { TimeRangePicker } from "react-datetime-kit";
import type { TimeRange } from "react-datetime-kit";

const [range, setRange] = useState<TimeRange>({
  start: { hours: 9, minutes: 0 },
  end: { hours: 17, minutes: 0 },
});

<TimeRangePicker
  value={range}
  onChange={setRange}
  hourFormat={24}
  minuteStep={15}
  clearable
/>;

import { DateTimePicker } from "react-datetime-kit";

<DateTimePicker
  value={dt}
  onChange={setDt}
  hourFormat={12}
  minuteStep={5}
  showSeconds={false}
  clearable
/>;

import { DateTimeRangePicker } from "react-datetime-kit";
import type { DateRange } from "react-datetime-kit";

const [range, setRange] = useState<DateRange>({ start: null, end: null });

<DateTimeRangePicker
  value={range}
  onChange={setRange}
  numberOfMonths={2}
  hourFormat={24}
  minuteStep={15}
  showDefaultPresets
  clearable
/>;

import { useState } from "react";
import { DatePicker, TimePicker } from "react-datetime-kit";

export function App() {
  const [date, setDate] = useState<Date | null>(null);
  const [time, setTime] = useState(null);

  return (
    <>
      {/* Shows a × button when a date is selected */}
      <DatePicker
        value={date}
        onChange={setDate}
        clearable
        placeholder="Pick a date"
      />

      {/* Works with all picker types */}
      <TimePicker
        value={time}
        onChange={setTime}
        clearable
        placeholder="Pick a time"
      />
    </>
  );
}

import { useState } from "react";
import { enUS } from "date-fns/locale";
import {
  DatePicker,
  DateRangePicker,
  TimePicker,
  TimeRangePicker,
  DateTimePicker,
  DateTimeRangePicker,
} from "react-datetime-kit";
import type { DateRange, TimeValue, TimeRange } from "react-datetime-kit";

function KitchenSink() {
  const [date, setDate] = useState<Date | null>(null);
  const [range, setRange] = useState<DateRange>({ start: null, end: null });
  const [time, setTime] = useState<TimeValue | null>(null);
  const [timeRange, setTimeRange] = useState<TimeRange>({
    start: null,
    end: null,
  });

  return (
    <DatePicker
      // ─── value ────────────────────────────────────────────────
      value={date} // controlled value (Date | null)
      defaultValue={null} // uncontrolled initial value
      onChange={setDate} // (d: Date | null) => void
      // ─── display / behavior ──────────────────────────────────
      inline={false} // true → always-open calendar, no input
      disabled={false} // disable the whole picker
      readOnly={false} // show value but prevent edits
      clearable={true} // show × button when value is set
      placeholder="Select date" // input placeholder text
      autoFocus={false} // focus the input on mount
      id="dob" // id attr on the input
      name="dob" // name attr (forms)
      // ─── styling / theming ───────────────────────────────────
      size="md" // 'sm' | 'md' | 'lg'
      theme="auto" // 'light' | 'dark' | 'auto'
      dir="ltr" // 'ltr' | 'rtl'
      className="" // extra class on root wrapper
      inputClassName="" // extra class on <input>
      popoverClassName="" // extra class on floating panel
      colors={{
        // per-instance CSS-var overrides
        primary: "#7c3aed", //   selected day, Today button
        primaryHover: "#6d28d9", //   primary hover state
        primarySoft: "#f3e8ff", //   day-hover background
        background: "#fafafa", //   footer / muted surface
        surface: "#ffffff", //   popover background
        surfaceHover: "#f5f3ff", //   row hover background
        text: "#18181b", //   primary text
        textMuted: "#71717a", //   labels / helper text
        border: "#e4e4e7", //   borders / dividers
        borderStrong: "#d4d4d8", //   strong border / scrollbar thumb
        danger: "#ef4444", //   clear button hover
        disabled: "#d4d4d8", //   disabled day color
        rangeBg: "#f3e8ff", //   between range start & end
        focus: "#7c3aed", //   focus ring (defaults to primary)
      }}
      // ─── icon ────────────────────────────────────────────────
      showIcon={true} // false → hide the leading icon
      iconPosition="left" // 'left' | 'right'
      // ─── date constraints ────────────────────────────────────
      minDate={new Date(2020, 0, 1)} // earliest selectable (inclusive)
      maxDate={new Date(2030, 11, 31)} // latest selectable (inclusive)
      disabledDates={(d) => d.getDay() === 0} // Date[] | (d: Date) => boolean
      disablePast={false} // true → all days before today disabled
      disableFuture={false} // true → all days after today disabled
      // ─── display format ──────────────────────────────────────
      format="DD/MM/YYYY" // Moment-style or date-fns tokens
      locale={enUS} // date-fns Locale (enUS, fr, de, …)
      // ─── calendar layout ─────────────────────────────────────
      view="day" // 'day' | 'month' | 'year' (DatePicker only)
      headerPosition="top" // 'top' | 'bottom' — month/year nav position
      weekStartsOn={0} // 0=Sun, 1=Mon, ... 6=Sat
      showWeekNumbers={false} // ISO-8601 week numbers column
      numberOfMonths={1} // months visible side-by-side
      renderDay={(d, defaultNode) => defaultNode} // custom day cell
      // ─── popover behavior ────────────────────────────────────
      closeOnSelect={true} // false → keep popover open after pick
    />
  );
}

<DateRangePicker
  value={range}
  onChange={setRange} // (r: { start, end }) => void
  // ─── presets sidebar ─────────────────────────────────────
  showDefaultPresets={true} // built-in Today / Last 7 days / …
  presets={[
    // custom quick-select entries
    {
      label: "This sprint",
      range: () => ({
        start: new Date(2026, 1, 1),
        end: new Date(2026, 1, 14),
      }),
    },
  ]}
/>

<TimePicker
  value={time}
  onChange={setTime}                        // (t: TimeValue | null) => void

  hourFormat={24}                           // 12 | 24
  minuteStep={5}                            // 1 | 5 | 15 | 30 …
  secondStep={1}                            // only used when showSeconds
  showSeconds={false}                       // include the seconds column
  format="HH:mm"                            // override the input display
/>

<TimeRangePicker
  value={timeRange}
  onChange={setTimeRange}                   // (r: { start, end }) => void
  hourFormat={12}
  minuteStep={15}
  showSeconds={false}
/>

<DateTimePicker
  value={date}
  onChange={setDate} // single Date including time
  format="DD/MM/YYYY HH:mm" // mix date + time tokens
  hourFormat={24}
  minuteStep={5}
  showSeconds={false}
  disablePast // shorthand for disablePast={true}
/>

import { DatePicker } from "react-datetime-kit";

function Example() {
  const [date, setDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      format="DD/MM/YYYY" // → 19/02/2026
      // format="dddd, D MMMM, YYYY"  → Thursday, 19 February, 2026
      // format="YYYY-MM-DD"          → 2026-02-19
    />
  );
}

// Day · Month · Year
<DatePicker format="D/M/YYYY" />              // 19/2/2026
<DatePicker format="DD/MM/YYYY" />             // 19/02/2026
<DatePicker format="DD-MM-YY" />               // 19-02-26
<DatePicker format="DD.MM.YYYY" />             // 19.02.2026

// Year · Month · Day (ISO / DB-friendly)
<DatePicker format="YYYY/MM/DD" />             // 2026/02/19
<DatePicker format="YYYY-MM-DD" />             // 2026-02-19

// With month names
<DatePicker format="D MMM YYYY" />             // 19 Feb 2026
<DatePicker format="DD MMMM YYYY" />           // 19 February 2026
<DatePicker format="D-MMM-YYYY" />             // 19-Feb-2026
<DatePicker format="D MMM, YYYY" />            // 19 Feb, 2026

// With weekday names
<DatePicker format="dddd, D MMMM, YYYY" />     // Thursday, 19 February, 2026
<DatePicker format="ddd, DD MMM YYYY" />       // Thu, 19 Feb 2026

// DateTime
<DateTimePicker format="DD/MM/YYYY HH:mm" />   // 19/02/2026 14:30
<DateTimePicker format="D MMM YYYY, hh:mm A" />// 19 Feb 2026, 02:30 PM

<div data-rdk-theme="dark">
  <DatePicker value={date} onChange={setDate} />
</div>

useEffect(() => {
  document.documentElement.setAttribute(
    "data-rdk-theme",
    isDark ? "dark" : "light",
  );
}, [isDark]);

<DatePicker theme="dark" value={date} onChange={setDate} />

import { fr } from "date-fns/locale";

<DatePicker
  value={date}
  onChange={setDate}
  locale={fr}
  weekStartsOn={1} // Monday-first
  format="dd MMMM yyyy" // → "25 mai 2026"
/>;

<DatePicker dir="rtl" value={date} onChange={setDate} />

const holidays = ["2026-01-01", "2026-07-04", "2026-12-25"];

<DatePicker
  value={date}
  onChange={setDate}
  renderDay={(d, defaultNode) => {
    const iso = d.toISOString().slice(0, 10);
    const isHoliday = holidays.includes(iso);
    return (
      <>
        {defaultNode}
        {isHoliday && (
          <span
            style={{
              position: "absolute",
              bottom: 2,
              left: "50%",
              transform: "translateX(-50%)",
              width: 4,
              height: 4,
              borderRadius: "50%",
              background: "#ef4444",
            }}
          />
        )}
      </>
    );
  }}
/>;

import { useDatePicker } from "react-datetime-kit";

function MyCustomPicker() {
  const ctrl = useDatePicker({
    value: date,
    onChange: setDate,
    minDate: new Date(),
  });

  return (
    <div>
      <button
        onClick={() => ctrl.setVisibleMonth(addMonths(ctrl.visibleMonth, -1))}
      >
        ←
      </button>
      <span>{format(ctrl.visibleMonth, "MMMM yyyy")}</span>
      <button
        onClick={() => ctrl.setVisibleMonth(addMonths(ctrl.visibleMonth, 1))}
      >
        →
      </button>
      {/* Render your own grid using ctrl.isDisabled(d), ctrl.setValue(d), etc. */}
    </div>
  );
}