Feature-rich React date-time range picker with customizable presets, keyboard navigation, TypeScript support, and dark mode. Built on React 18 and TailwindCSS.
## 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
```sh
npm i react-tailwindcss-datetimepicker
```
```tsx
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 (
setRange({ start, end })}
>
);
}
```
> If you're already using TailwindCSS, you can skip the CSS import and add a `@source` directive instead. See the [Installation guide](https://reactdatetime.dev/docs/installation) for details.
## Documentation
Visit the official documentation at **[reactdatetime.dev](https://reactdatetime.dev)**:
- [Installation & Setup](https://reactdatetime.dev/docs/installation)
- [API Reference](https://reactdatetime.dev/docs/api-reference)
- [Customization & Themes](https://reactdatetime.dev/docs/customization)
- [Localization](https://reactdatetime.dev/docs/localization)
- [Migration Guide](https://reactdatetime.dev/docs/migration)
- [Interactive Playground](https://reactdatetime.dev/playground)
## Links
- [Official Documentation](https://reactdatetime.dev)
- [Discussion forums](https://github.com/mohsentaleb/react-tailwindcss-datetimepicker/discussions)
- [Report an issue](https://github.com/mohsentaleb/react-tailwindcss-datetimepicker/issues/new/choose)
## License
[MIT](https://github.com/mohsentaleb/react-tailwindcss-datetimepicker/blob/master/LICENSE.md)
