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