Next.js

Try the live Next.js demo for interactive picker and copy-paste snippets.

Support tier

Full support via the React entry. App Router needs a client boundary ("use client"). Server Components must not import the picker directly.

Install + deps

npm install universal-datetime-picker

Same peers as React: react and react-dom ≥ 18, which Next.js already provides.

Setup

Put interactive pickers in a client component. Import universal-datetime-picker/style.css in that client file or another client module loaded on the page. Keep the Server Component page thin and render the client child.

Exact import path

"use client";

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

Minimal example

// app/booking/DatePicker.tsx
"use client";

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

export function BookingDatePicker() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DateTimeInput
      asString={false}
      value={value}
      onChange={(next) => setValue(next instanceof Date ? next : null)}
    />
  );
}

Realistic example

// app/booking/page.tsx  (Server Component)
import { BookingPanel } from "./BookingPanel";

export default function BookingPage() {
  return (
    <main>
      <h1>Book a slot</h1>
      <BookingPanel />
    </main>
  );
}

// app/booking/BookingPanel.tsx
"use client";

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

export function BookingPanel() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <section>
      <DateTimeInput
        asString={false}
        value={value}
        onChange={(next) => setValue(next instanceof Date ? next : null)}
        placeholder="Pick date and time"
        use12Hours
      />
      <DateTime
        inline
        mode="date"
        asString={false}
        value={value}
        onChange={setValue}
      />
    </section>
  );
}

Configuration notes

Use the main React import, not ./wc or ./vanilla, unless you intentionally want those APIs.
CSS can live in the client component or a shared client layout. Do not rely on a Server Component-only CSS import path that never reaches the client bundle.
Pages Router works the same as any React SPA: no "use client" directive required.
All React props apply. See React and Props.

Events

onChange for the selected value
onOpenChange for overlay open state

Customization links

Pitfalls

Importing the picker in a Server Component without "use client" fails the build or hydrates incorrectly.
Missing style.css in the client graph yields an unstyled picker.
Non-inline pickers still default to open. Set defaultOpen={false} or control open.

Troubleshooting

If you see React SSR or hydration errors, move the import behind "use client". For missing styles or wrong entries, see Troubleshooting.