r-datetime

A customizable and lightweight React Date Time Picker component with a smooth UI, time zone support, and flexible configuration options. Ideal for modern React applications that require date, time, or date-time inputs with advanced features.

📦 Installation

npm install r-datetime

or

yarn add r-datetime

🚀 Quick Start

import React, { useState } from 'react';
import DateTimePicker from 'r-datetime';

const App = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div className="app">
      <DateTimePicker onChange={(date) => setSelectedDate(date)} />
      {selectedDate && (
        <p>Selected: {selectedDate.toLocaleString()}</p>
      )}
    </div>
  );
};

🎨 Theming Options

Default Theme

Clean, minimalist design that works with any application.

<DateTimePicker onChange={(date) => setSelectedDate(date)} />

Light Theme with Custom Colors

Customize your picker with any color palette that matches your brand.

<DateTimePicker
  onChange={(date) => setSelectedDate(date)}
  bodyColor="bg-gray-100"
  textColor="text-gray-800"
  buttonColor="bg-blue-600"
  iconColor="text-blue-500"
/>

Dark Theme

Perfect for dark-mode interfaces or night-time usage.

<DateTimePicker
  onChange={(date) => setSelectedDate(date)}
  bodyColor="bg-black"
  textColor="text-gray-100"
  buttonColor="bg-purple-600"
  iconColor="text-purple-400"
/>

📅 Different Modes

Date-Time Mode (Default)

Select both date and time in one component.

<DateTimePicker onChange={(date) => setSelectedDate(date)} />

Date Only Mode

When you only need to collect a date.

<DateTimePicker
  onChange={(date) => setSelectedDate(date)}
  mode="date"
  buttonColor="bg-green-600"
/>

Time Only Mode

For time selection without dates.

<DateTimePicker
  onChange={(date) => setSelectedDate(date)}
  mode="time"
  buttonColor="bg-amber-600"
/>

🌍 Internationalization

Support for multiple languages and date formats to meet global user needs.

<DateTimePicker
  onChange={(date) => setSelectedDate(date)}
  locale="fr-FR"
  dateFormat={{ day: "2-digit", month: "long", year: "numeric" }}
  timeFormat={{ hour: "2-digit", minute: "2-digit", hour12: false }}
  firstDayOfWeek={1} // Monday as first day
  buttonColor="bg-indigo-600"
/>

🎛️ Props

| Prop | Type | Default | Description | | ---------------------- | ---------------------------------------- | --------------- | --------------------------------------- | | mode | 'date' \| 'time' \| 'datetime' | 'datetime' | Choose picker mode | | onChange | (date: Date) => void | required | Callback on date/time selection | | bodyColor | string | bg-white | Tailwind class for body background | | textColor | string | text-black | Tailwind class for text color | | buttonColor | string | bg-blue-500 | Tailwind class for button color | | classname | string | py-4 | Customized layout of date/time selector | | iconColor | string | text-blue-500 | Tailwind class for icon color | | locale | string | en-US | Locale for formatting | | dateFormat | Intl.DateTimeFormatOptions | {} | Custom date format | | timeFormat | Intl.DateTimeFormatOptions | {} | Custom time format | | firstDayOfWeek | 0 \| 1 | 0 (Sunday) | First day of the week | | enableRangeSelection | boolean | false | Enable date range selection | | onRangeChange | (start: Date, end: Date) => void | undefined | Callback for range change | | initialEndDate | Date | undefined | Preselect end date in range mode | | minDate | Date | undefined | Minimum selectable date | | maxDate | Date | undefined | Maximum selectable date | | disabledDates | Date[] | [] | Dates to be disabled | | timeZone | string | User's TZ | IANA time zone (e.g., 'Europe/Paris') | | showTimeZoneSelector | boolean | false | Show time zone selector dropdown | | customPresets | { label: string, value: () => Date }[] | [] | Predefined date presets | | minuteInterval | number | 1 | Interval for time selection in minutes | | onHoverTextColor | string | black | Text color when hovering | | hoverColor | string | bg-gray-300 | Background color on hover |

🧪 Development & Testing

You can test your local changes using:

npm link
npm run build

Then in your test project:

npm link r-datetime

📘 License

MIT License

📌 Author & Repository

• Author: Piyush
• GitHub: https://github.com/pk3808/r-datetime
• NPM: https://www.npmjs.com/package/r-datetime