Shadcn/UI Datetime Picker with Time Zone and Trigger Options

Shadcn Datetime Picker is a simple UI component for simple and customizable date and time selection within your Shadcn UI projects.

It supports time zone selection, custom triggers, and more, making it ideal for any project that needs a reliable datetime input.

GitHub Repo

Live Demo

Features

📅 Intuitive Date Selection: Provides a straightforward calendar interface for picking dates.

🌎 Timezone Support: Handles timezones gracefully. Accurate date and time representation.

⏰ Flexible Time Input: Allows users to easily select specific times.

⚙️ Customizable Triggers: Offers the flexibility to use custom buttons or elements to activate the picker.

Use Cases

Booking Systems: Implement the Datetime Picker in flight or hotel booking platforms, allowing users to select arrival and departure dates and times.
Scheduling Applications: Integrate it into calendar or scheduling apps to facilitate event creation with precise date and time settings.
E-commerce Platforms: Use the picker to specify delivery dates and times for online orders.
Data Analysis Tools: Employ the component for filtering data based on specific date and time ranges.
Content Management Systems: Allow content creators to schedule publishing times for articles or posts.

Installation Guide

1. Install Shadcn UI Dependencies:

npx shadcn@latest add button dropdown-menu input label popover select scroll-area

2. Install react-day-picker:

yarn add react-day-picker@^9

3. Copy datetime-picker.tsx: Copy the datetime-picker.tsx component file into your project’s component directory.

Usage Guide

1. Basic Usage:

   import { DateTimePicker } from '@/components/datetime-picker';
   import { useState } from 'react';
   export default function Home() {
     const [date, setDate] = useState<Date | undefined>(undefined);
     return <DateTimePicker value={date} onChange={setDate} />;
   }

2. Timezone Support:

   import { DateTimePicker } from '@/components/datetime-picker';
   import { useState } from 'react';
   export default function Home() {
     const [date, setDate] = useState<Date | undefined>(undefined);
     return <DateTimePicker value={date} onChange={setDate} timezone="UTC" />;
   }

3. Custom Trigger:

   import { DateTimePicker } from '@/components/datetime-picker';
   import { useState } from 'react';
   import { Button } from '@/components/ui/button';
   export default function Home() {
     const [date, setDate] = useState<Date | undefined>(undefined);
     return (
       <DateTimePicker
         value={date}
         onChange={setDate}
         renderTrigger={(value, timezone) => <Button>{value?.toLocaleString()}</Button>}
       />
     );
   }