JSPM

react-date-range-picker-pro

1.0.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q38841F
  • License MIT

A powerful, customizable React date and time picker component with intelligent presets, interactive calendar, and seamless integration capabilities.

Package Exports

  • react-date-range-picker-pro
  • react-date-range-picker-pro/dist/index.esm.js
  • react-date-range-picker-pro/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-date-range-picker-pro) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-date-range-picker-pro

A powerful, customizable React date and time picker component with intelligent presets, interactive calendar, and seamless integration capabilities.

📖 Full Documentation

✨ Features

  • Smart Presets - Quick selection buttons (Today, Last 7 days, This month, etc.)
  • Interactive Calendar - Visual date range selection with click-outside-to-close
  • Time Selection - Optional time picker with timezone support
  • Highly Customizable - Custom presets, configurable UI elements
  • Callback Integration - Real-time data updates via callbacks
  • Responsive Design - Works seamlessly on all screen sizes
  • Zero Dependencies - Only requires React and Lucide icons

🚀 Quick Start

import DateRangePickerPro from 'react-date-range-picker-pro';

function App() {
  const handleDateChange = (data) => {
    console.log('Selected range:', data);
  };

  return (
    <DateRangePickerPro
      onDateRangeChange={handleDateChange}
      showTimeSelector={true}
      enableTimezone={true}
    />
  );
}

💖 Become a Sponsor

This project is fully supported by sponsors! If you find this date range picker useful, please consider becoming a sponsor to help maintain and improve it.

CSS Styling

The component styles are automatically injected when you import the component. For Storybook or Server-Side Rendering setups, you may need to manually import the CSS:

import 'react-date-range-picker-pro/dist/index.css';

📦 Props

Prop Type Default Description
onDateRangeChange function - Callback for date range changes
onTimeChange function - Callback for time changes
showTimeSelector boolean true Show/hide time picker
showPresetsByDefault boolean true Show presets initially
enableTimezone boolean true Enable timezone selection
customPresets array null Custom preset configurations
initialStartDate Date new Date() Initial start date
initialEndDate Date +7 days Initial end date
className string "" Additional CSS classes

🎯 Perfect For

  • Analytics Dashboards - Filter data by date ranges
  • Booking Systems - Hotel, event, or appointment scheduling
  • Report Generation - Business reporting with date filters
  • Content Management - Publication date selection
  • E-commerce - Order date filtering and analysis

🛠️ Built With

  • React 18+ with Hooks
  • Tailwind CSS for styling
  • Lucide React for icons
  • Modern ES6+ JavaScript

📱 Browser Support

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

📄 License

MIT License - feel free to use in personal and commercial projects.

Keywords: react, date-picker, time-picker, calendar, date-range, datetime, react-component, tailwind, responsive, customizable