Features

• Date range selection with start/end times
• Customizable preset ranges (e.g., Today, Last 30 Days)
• Keyboard navigation and accessibility
• Full TypeScript support
• Built-in dark mode
• Fully responsive, optimized for mobile
• 22 color themes (all Tailwind CSS named colors)
• No dependency on external date libraries

Quick Start

npm i react-tailwindcss-datetimepicker

import { useState } from 'react';
import DateTimePicker from 'react-tailwindcss-datetimepicker';
import 'react-tailwindcss-datetimepicker/style.css';

function App() {
  const [range, setRange] = useState({
    start: new Date(new Date().setDate(new Date().getDate() - 2)),
    end: new Date(),
  });

  return (
    <DateTimePicker
      start={range.start}
      end={range.end}
      applyCallback={(start, end) => setRange({ start, end })}
    >
      <button type="button">Pick dates</button>
    </DateTimePicker>
  );
}

If you're already using TailwindCSS, you can skip the CSS import and add a @source directive instead. See the Installation guide for details.

Documentation

Visit reactdatetime.dev for the full documentation:

• Installation & Setup
• API Reference
• Customization & Themes
• Localization
• Migration Guide
• Interactive Playground

Links

• Documentation
• Discussion forums
• Report an issue

License

MIT