date-time-pickers

A customizable, fully functional, and visually appealing React component for selecting dates, times, or both. Built with TypeScript for type safety and a great developer experience.

✨ Features

• Versatile Picker Modes: Date, time, or datetime selection
• Professional UI: Modern, floating popup with shadow, rounded corners, and divider
• Month & Year Dropdowns: Quickly jump to any month or year
• Today & Selected Highlight: Clear visual cues for today and selected date
• Clear Button: Easily reset your selection
• Customizable: Colors, formats, themes, and more
• Modern UX: Responsive, mobile-friendly, smooth animations, and hover effects
• TypeScript Support: Strongly typed props and events
• Developer-Friendly: Controlled/uncontrolled usage, simple API

Installation

npm install date-time-pickers

Or with yarn:

yarn add date-time-pickers

Usage

import React, { useState } from 'react';
import { DateTimePicker } from 'date-time-pickers';

function App() {
  const [date, setDate] = useState();
  const [time, setTime] = useState();
  const [datetime, setDatetime] = useState();

  return (
    <div>
      <h3>Date Picker</h3>
      <DateTimePicker mode="date" value={date} onChange={setDate} />
      <div>Selected: {String(date)}</div>

      <h3>Time Picker</h3>
      <DateTimePicker mode="time" value={time} onChange={setTime} format="HH:mm" />
      <div>Selected: {String(time)}</div>

      <h3>DateTime Picker</h3>
      <DateTimePicker mode="datetime" value={datetime} onChange={setDatetime} format="yyyy-MM-dd HH:mm" />
      <div>Selected: {String(datetime)}</div>
    </div>
  );
}

Props & API

| Prop | Type | Default | Description | |------------------|-------------------------------------|-----------------|----------------------------------------------------------| | mode | "date" \| "time" \| "datetime" | "date" | Picker mode | | value | Date \| string | | Controlled value | | defaultValue | Date \| string | | Uncontrolled initial value | | onChange | (value: Date \| string) => void | | Callback when value changes | | format | string | yyyy-MM-dd | Date/time format (date-fns format) | | placeholder | string | Select date/time | Placeholder text | | primaryColor | string | #007bff | Main accent color | | backgroundColor| string | #fff | Picker background color | | textColor | string | #222 | Text color | | theme | "light" \| "dark" | "light" | Theme mode | | style | React.CSSProperties | | Custom styles | | className | string | | Custom class name |

Customization

• Colors: Use primaryColor, backgroundColor, and textColor props.
• Theme: Switch between light and dark with the theme prop.
• Format: Use any date-fns format string.
• UI: Month/year dropdowns, clear button, and modern popup are built-in.

License

MIT

Author

Akshay Bhalala

• NPM Profile
• GitHub

Keywords

date, time, picker, datetime, react, component, ui, typescript, calendar, input, form, theme, customizable, modern, responsive, animation, professional, dropdown, clear