In today's world, there are numerous UI libraries and components available, but many date-time pickers are difficult to customize or lack of a good user experience.

In this post, I'll show you how to build a highly customizable datetime picker using Shadcn's date picker component and Tailwind CSS. By the end, you'll have a fully functional datetime picker with a modern UI and easy customization options. I provide the Code sandbox link at the end of the post too.

But why use Shadcn?

Shadcn date picker had a nice style and was so easy to customize. Under the hood, shadcn date picker uses react-day-picker in headless mode, so we can customize any elements using just tailwind classes.

    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium"
        ...

First Step: Preparing

• First, create a new NextJS app (I’m using the app router). This will serve as the foundation for our project.

npx create-next-app@14

• Next, install Shadcn

npx shadcn-ui@latest init

• Now, install the date picker components. The Date Picker is built using a composition of the <Popover /> and the <Calendar /> components.

npx shadcn-ui@latest add popover calendar

After that, use the default date time picker of Shadcn: