@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