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