Installation

Prerequisites

Chronos Picker requires React 18 or higher. It relies onLuxon for date manipulation, which will be installed ensuring minimal bundle size overhead.

Install Package

Run the following command in your terminal:

1npm install @theengineerguy/chronos-picker luxon

Or if you are using Yarn:

1yarn add @theengineerguy/chronos-picker luxon

Import Styles

Don't forget to import the CSS file. You usually want to do this at the top level of your application (e.g., App.tsx, layout.tsx, or main.tsx).

1// In your main entry file
2import "@theengineerguy/chronos-picker/dist/style.css";

Next.js Setup

Chronos Picker is fully compatible with Next.js App Router. Since it involves user interaction, make sure to use it within a Client Component.

1"use client";
2
3import { DateTimePicker } from "@theengineerguy/chronos-picker";
4
5export default function Page() {
6  return <DateTimePicker />;
7}