@metadiv-studio/date-time-picker

A modern, accessible date and time picker component built with React, TypeScript, and Tailwind CSS. This component provides an intuitive interface for selecting both date and time with a clean, shadcn UI-inspired design.

Features

• 📅 Calendar Integration: Built-in calendar for date selection using react-day-picker
• 🕐 Time Selection: Native time input with customizable intervals
• 🌙 Dark Mode Ready: Compatible with dark mode themes
• ♿ Accessibility: Full keyboard navigation and screen reader support
• 📱 Responsive Design: Works seamlessly across all device sizes
• 🎨 Customizable: Extensive styling options with Tailwind CSS
• 🌍 Internationalization: Built-in translation support

Installation

npm install @metadiv-studio/date-time-picker

Dependencies

This component requires the following peer dependencies:

{
  "react": "^18",
  "react-dom": "^18"
}

Tailwind CSS Configuration

Important: You must add the package files to your tailwind.config.ts content array to ensure proper styling:

// tailwind.config.ts
export default {
  content: [
    // ... your existing content
    "./node_modules/@metadiv-studio/**/*.{js,ts,jsx,tsx}"
  ],
  // ... rest of your config
}

Usage

import React, { useState } from 'react'
import { DateTimePicker } from '@metadiv-studio/date-time-picker'

function App() {
  const [date, setDate] = useState<Date>()

  return (
    <DateTimePicker 
      date={date} 
      setDate={setDate}
      className="w-full max-w-sm"
    />
  )
}

Props

date (optional)

Type: Date | undefined

Description: The currently selected date and time. When undefined, the picker shows a placeholder text.

Example:

const [selectedDateTime, setSelectedDateTime] = useState<Date>(new Date())

<DateTimePicker 
  date={selectedDateTime} 
  setDate={setSelectedDateTime}
/>

setDate

Type: (date: Date | undefined) => void

Description: Callback function that is called when a new date and time is selected. The function receives the selected Date object or undefined if no date is selected.

Example:

const handleDateTimeChange = (newDate: Date | undefined) => {
  if (newDate) {
    console.log('Selected date:', newDate.toISOString())
    // Update your application state
    setSelectedDateTime(newDate)
  }
}

<DateTimePicker 
  date={selectedDateTime} 
  setDate={handleDateTimeChange}
/>

className (optional)

Type: string

Description: Additional CSS classes for custom styling. The component uses Tailwind CSS classes and can be extended with your own styles.

Example:

<DateTimePicker 
  date={date} 
  setDate={setDate}
  className="w-full max-w-md border-2 border-blue-200 rounded-lg"
/>

Component Behavior

Date Selection

• Click the trigger button to open the date picker
• Use the calendar to select a date
• The selected date is highlighted and stored in local state

Time Selection

• Use the time input field to set the desired time
• Click the check button (✓) to apply the selected time
• The time is combined with the selected date when applied

State Management

• The component maintains internal state for the selected date and time
• Changes are only applied to the parent component when the check button is clicked
• The popover automatically closes after applying the selection

Translation Support

The component includes built-in translation keys for:

• Month names (january, february, etc.)
• Placeholder text ("pick a date and time")

Styling

The component uses a combination of:

• Tailwind CSS for layout and spacing
• CSS custom properties for theming
• Class variance authority for component variants
• Tailwind merge for class conflict resolution

Custom Styling Examples

// Custom width and border
<DateTimePicker 
  className="w-80 border-2 border-gray-300 rounded-xl"
/>

// Custom button styling
<DateTimePicker 
  className="[&>button]:bg-blue-500 [&>button]:text-white [&>button]:hover:bg-blue-600"
/>

// Dark mode specific styles
<DateTimePicker 
  className="dark:bg-gray-800 dark:text-white"
/>

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Clean build artifacts
npm run clean

Architecture

The DateTimePicker is composed of several sub-components:

• Popover: Container for the calendar and time picker
• Calendar: Date selection using react-day-picker
• Time Input: Native HTML time input with custom styling
• Button: Trigger and action buttons with icon support

Browser Support

• Modern browsers with ES6+ support
• React 18+
• TypeScript 5+
• Tailwind CSS 3.4+

UNLICENSED