simple-react-date-range-picker

A simple and customizable React date range picker component.

Installation

You can install the package using npm:

npm install simple-react-date-range-picker

yarn add simple-react-date-range-picker

Usage

Here’s a basic example of how to use the simple-react-date-range-picker in your React application:

import React from 'react';
import ReactDOM from 'react-dom';
import DateRangePicker from 'simple-react-date-range-picker';

const App = () => {
  const handleDateRangeChange = (start, end) => {
    console.log('Selected Date Range:', start, end);
  };

  return (
    <div>
      <h1>Date Range Picker</h1>
      <DateRangePicker
        initialStartDate={new Date(2024, 7, 10)}
        initialEndDate={new Date(2024, 7, 20)}
        minDate={new Date(2024, 7, 1)}
        maxDate={new Date(2024, 7, 31)}
        onDateRangeChange={handleDateRangeChange}
        numberOfMonths={2}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

• initialStartDate (Date, optional): Initial start date of the selected range.
• initialEndDate (Date, optional): Initial end date of the selected range.
• minDate (Date, optional): The earliest date that can be selected. Dates before this will be disabled.
• maxDate (Date, optional): The latest date that can be selected. Dates after this will be disabled.
• onDateRangeChange (Function, required): Callback function that is called when the date range changes. Receives the start and end dates as arguments.
• numberOfMonths (Number, optional): Number of months to display in the picker. Defaults to 2.

Example

<DateRangePicker 
  initialStartDate={new Date(2024, 7, 10)} 
  initialEndDate={new Date(2024, 7, 20)} 
  minDate={new Date(2024, 7, 1)} 
  maxDate={new Date(2024, 7, 31)} 
  onDateRangeChange={(start, end) => console.log(start, end)} 
  numberOfMonths={2}
/>

CSS Styling

/* Import the CSS file */
import 'simple-react-date-range-picker/dist/index.css';