React Templates & Themes Logo React Templates & Themes
Shadcn Datetime Picker screenshot

Shadcn Datetime Picker

Author Avatar Theme by Maliksidk19
Updated: 14 Feb 2025
231 Stars

Beautifully crafted datetime picker component using shadcn ui

Github Live Preview

Categories

Nextjs Tailwind Shadcn ui

Overview:

The Shadcn UI - Datetime Picker is a tool designed to assist with selecting dates and times, featuring a time picker component. While Version 1 may have a layout shift issue on the time picker select component when used within a popover, Version 2 attempts to address this and possibly improve functionality.

Features:

  • Datetime Selection: Allows users to easily select dates and times.
  • Time Picker Component: Includes a specific component dedicated to selecting times.
  • Popover Compatibility: Works seamlessly within popovers for a better user experience.

Installation:

To install the Shadcn UI - Datetime Picker, follow these steps:

  1. Add the script reference in your HTML:

    <script src="shadcn-ui-datetime-picker.js"></script>

  2. Import the CSS file in the <head> section:

    <link rel="stylesheet" href="shadcn-ui-datetime-picker.css">

  3. Initialize the datetime picker in your JavaScript file:

    const datetimePicker = new ShadcnDatetimePicker();
datetimePicker.init();

Summary:

The Shadcn UI - Datetime Picker is a useful tool that allows for easy selection of dates and times. While Version 1 may have a minor issue with layout shifts in select components when used in popovers, Version 2 aims to enhance the time picker functionality. By following the installation guide, users can quickly integrate this tool into their applications for efficient datetime selection.