npm install universal-datetime-picker

React date time picker

Use native React components for date, time, datetime, and range selection. No Web Components required. Import DateTime, DateTimeInput, and DateTimeRange from the main package entry, enable universal-datetime-picker/style.css once, and set asString={false} when you want Date or TimeValue objects from onChange.

Native components with optional React 18+ peers.

Try the live demo

npm install universal-datetime-picker

Live demo

Live date-time input demo

Selected: null

Date · disable past

disablePastDates: past days greyed out.

null

Date · disable future

disableFutureDates: future days blocked.

null

Date · min & max

minDate / maxDate: window from 7 days ago to 14 days ahead.

null

Time only · TimeValue

Popover: adjust time, then press OK to commit.

null

Time · no seconds

Popover without seconds: confirm with OK.

null

Combined date & time · Date

Datetime popover: day + time draft until OK.

null

Separate view (tabs) · Date

Tabs layout popover: confirm with OK.

null

Input · string (asString)

Datetime input: commit with OK (not on day click alone).

Selected: null

Input · booking window

Popover with past disabled and a 30-day maxDate.

Selected: null

Date range · past disabled

Range picker with disablePastDates.

Start - End

null → null

French locale · week starts Monday

null

Dark theme · date & time popover

Date: null
Time: null

React app

import { useState } from "react";
import DateTime, { DateTimeInput, DateTimeRange } from "universal-datetime-picker";
import "universal-datetime-picker/style.css";

export function BookingForm() {
  const [date, setDate] = useState<Date | null>(null);
  const [range, setRange] = useState({ start: null, end: null });

  return (
    <>
      <DateTimeInput
        asString={false}
        value={date}
        onChange={(next) => setDate(next instanceof Date ? next : null)}
        placeholder="Pick date & time"
        use12Hours
      />
      <DateTime inline mode="date" asString={false} value={date} onChange={setDate} />
      <DateTimeRange inline asString={false} value={range} onChange={setRange} />
    </>
  );
}

Notes

Import from universal-datetime-picker and universal-datetime-picker/style.css.
Set asString={false} when you want Date or TimeValue objects from onChange.

Documentation

Guides for this stack and the shared API.