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
/>

<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>
  );
}