@initbase/react-datetime-picker

Zero-dependency date, time, and range pickers for React 18+.

Install

npm install @initbase/react-datetime-picker

Usage

Import the component you need and its CSS:

import { DatePicker } from '@initbase/react-datetime-picker';
import '@initbase/react-datetime-picker/datetime-picker.css';

DatePicker

import { useState } from 'react';
import { DatePicker } from '@initbase/react-datetime-picker';

function Example() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DatePicker value={value} onChange={setValue} placeholder="Pick a date" />
  );
}

DateRangePicker

import { useState } from 'react';
import { DateRangePicker } from '@initbase/react-datetime-picker';

function Example() {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
  return (
    <DateRangePicker value={value} onChange={setValue} placeholder="Pick a range" />
  );
}

TimePicker

import { useState } from 'react';
import { TimePicker } from '@initbase/react-datetime-picker';

function Example() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <TimePicker value={value} onChange={setValue} />
  );
}

DateTimePicker

import { useState } from 'react';
import { DateTimePicker } from '@initbase/react-datetime-picker';

function Example() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DateTimePicker value={value} onChange={setValue} />
  );
}

TimeRangePicker / DateTimeRangePicker

Same pattern with [Date | null, Date | null] tuple values.

Common props

| Prop | Type | Default | Description | |---|---|---|---| | value | Date \| null / [Date\|null, Date\|null] | — | Controlled value | | onChange | (value) => void | — | Change handler | | placeholder | string | — | Placeholder text | | position | 'bottom' \| 'top' \| 'flexible' | 'flexible' | Popover position | | step | number | 1 | Minute/second step interval | | use12h | boolean | false | 12-hour format | | showSeconds | boolean | false | Show seconds column |

Theming

Customize with CSS custom properties on any parent of .rdp-wrapper:

.rdp-wrapper {
  --rdp-primary: #4f46e5;
  --rdp-primary-hover: #4338ca;
  --rdp-text: #111827;
  --rdp-text-muted: #9ca3af;
  --rdp-border: #e5e7eb;
  --rdp-border-radius: 8px;
  --rdp-font-size: 14px;
  --rdp-cell-size: 36px;
}

Links

• Docs
• Demo
• GitHub
• Support