React Lightweight DateTime UI

A highly customizable and beautiful date-time picker component for React applications. This component provides a modern, wheel-based time picker with a calendar date picker, all with extensive customization options.

Features

🎨 Fully customizable colors - Customize every aspect of the component's appearance
🕒 12/24 hour format support - Choose between 12-hour and 24-hour time formats
🌐 Timezone support - Format dates with specific timezones
⏱️ Configurable time step - Set custom minute/second increments
📅 Date range restrictions - Disable past/future dates or set min/max date ranges
📱 Responsive design - Works great on both desktop and mobile devices
🔄 ISO string support - Get dates in ISO format for easy API integration
🎡 Smooth wheel time picker - Intuitive and engaging time selection experience

Installation

npm install react-lightweight-datetime-picker
# or
yarn add react-lightweight-datetime-picker

Quick Start

import React, { useState } from "react";
import { DateTime } from "react-lightweight-datetime-picker";

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

  return (
    <div className="App">
      <h1>Date Time Picker Example</h1>
      <DateTime
        value={selectedDate}
        onChange={(date) => setSelectedDate(date)}
        placeholder="Select date and time"
      />

      {selectedDate && <p>Selected: {selectedDate.toString()}</p>}
    </div>
  );
}

export default App;

Props

Prop	Type	Default	Description
`value`	`Date` \| `null`	`null`	The currently selected date and time
`onChange`	`(date: Date \| null, isoString?: string) => void`	-	Callback when date/time changes
`placeholder`	`string`	`"Select date and time"`	Placeholder text when no date is selected
`format`	`"12"` \| `"24"`	`"12"`	Time format (12 or 24 hour)
`showSeconds`	`boolean`	`false`	Whether to show seconds in time picker
`timeStep`	`number`	`1`	Step increment for minutes (1-60)
`colors`	`Partial<DateTimeColors>`	`{}`	Custom color overrides
`size`	`"sm"` \| `"md"` \| `"lg"`	`"md"`	Size of the date-time picker
`disabled`	`boolean`	`false`	Whether the picker is disabled
`disablePast`	`boolean`	`false`	Disable selecting dates in the past
`disableFuture`	`boolean`	`false`	Disable selecting dates in the future
`minDate`	`Date`	`undefined`	Minimum selectable date
`maxDate`	`Date`	`undefined`	Maximum selectable date
`position`	`"bottom-start"` \| `"bottom-end"` \| `"top-start"` \| `"top-end"`	`"bottom-start"`	Position of the popup
`className`	`string`	`""`	Additional CSS class names
`returnISO`	`boolean`	`false`	Return ISO string in onChange callback
`timezone`	`string`	`undefined`	Timezone for ISO string formatting

Color Customization

You can customize all colors by passing a colors prop:

<DateTime
  value={date}
  onChange={setDate}
  colors={{
    primary: "#3B82F6", // Main accent color
    primaryHover: "#2563EB", // Hover state for primary color
    selected: "#3B82F6", // Selected date background
    selectedText: "#FFFFFF", // Selected date text
    hover: "#EFF6FF", // Hover background
    hoverText: "#1E3A8A", // Hover text
    disabled: "#E5E7EB", // Disabled state background
    disabledText: "#9CA3AF", // Disabled state text
    border: "#D1D5DB", // Border color
    background: "#FFFFFF", // Background color
    text: "#1F2937", // Text color
  }}
/>

Advanced Usage

With ISO String Return

import React, { useState } from "react";
import { DateTime } from "react-lightweight-datetime-picker";

function ISOExample() {
  const [selectedDate, setSelectedDate] = useState(null);
  const [isoString, setIsoString] = useState("");

  const handleDateChange = (date, iso) => {
    setSelectedDate(date);
    setIsoString(iso);
  };

  return (
    <div>
      <DateTime
        value={selectedDate}
        onChange={handleDateChange}
        returnISO={true}
        timezone="UTC"
      />

      {isoString && <p>ISO String: {isoString}</p>}
    </div>
  );
}

With Date Range Restrictions

<DateTime
  value={date}
  onChange={setDate}
  disablePast={true}
  maxDate={new Date(2025, 11, 31)}
/>

Custom Time Step

<DateTime
  value={date}
  onChange={setDate}
  timeStep={15} // 15-minute increments
  showSeconds={true}
/>

TypeScript Support

This package includes TypeScript definitions. You can import types as follows:

import {
  DateTime,
  DateTimeColors,
  DateTimeProps,
} from "react-lightweight-date-time-ui";

Browser Support

The component is compatible with all modern browsers and IE11+ (with appropriate polyfills).

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT