npm install universal-datetime-picker

Next.js date time picker

Next.js App Router requires a client boundary for interactive pickers. Mark components with "use client", import DateTime or DateTimeInput from universal-datetime-picker, and load style.css in that client file or a client layout. Server Components should not import the picker directly. Wrap usage in a client child as shown below.

React components in a client boundary.

Try the live demo

npm install universal-datetime-picker

Live demo

Inline date · Date object

null

Popover datetime input

null

Date range

Start - End

null → null

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

Notes

The live demo below uses the same React components as /react.
Import style.css once in a client component or root layout.

Documentation

Guides for this stack and the shared API.