React-ranged-datepicker NPM

DateRangePicker Component

DateRangePicker is a React component that provides a user-friendly interface for selecting date ranges within specified minimum and maximum date boundaries.

Installation

To install DateRangePicker in your project, you can use npm or yarn:

npm install react-ranged-datepicker

yarn add react-ranged-datepicker

Usage

Import the DateRangePicker component into your React application and use it as follows:

import React, { useState } from "react";
import { DateRangePicker } from "react-ranged-datepicker";
import "./App.css";

const App = () => {
  const minDate = new Date(2023, 11, 1); // January 1, 2023
  const maxDate = new Date(2029, 1, 2); // February 2, 2024
  const initialStartDate = new Date(2025, 6, 14); // May 14, 2023

  const [selectedDates, setSelectedDates] = useState({
    startDate: null,
    endDate: null,
  });

  const handleDateChange = ({ startDate, endDate }) => {
    setSelectedDates({ startDate, endDate });
  };

  return (
    <div className="app">
      <h1>Date Range Picker</h1>
      <DateRangePicker
        minDate={minDate}
        maxDate={maxDate}
        startDate={initialStartDate}
        onDateChange={handleDateChange}
      />
      <div>
        <p>
          Selected Start Date:{" "}
          {selectedDates.startDate
            ? selectedDates.startDate.toDateString()
            : "None"}
        </p>
        <p>
          Selected End Date:{" "}
          {selectedDates.endDate
            ? selectedDates.endDate.toDateString()
            : "None"}
        </p>
      </div>
    </div>
  );
};

export default App;

Props

minDate (Date): The minimum selectable date. If not provided, defaults to January 1, 1000.
maxDate (Date): The maximum selectable date. If not provided, defaults to December 31, 9999.
startDate (Date): The initial start date of the date range. If not provided, defaults to today's date or minDate if today's date is not within the specified range.
theme (String): The theme of the DateRangePicker. Available themes: "light-theme" (default) and "dark-theme".
onDateChange (Function): A callback function that is called when the selected date range changes. It receives an object containing the new start and end dates.

Prop Details

minDate and maxDate: These props define the boundaries within which dates can be selected. Any date before minDate or after maxDate will be disabled.
startDate: This prop sets the initial start date of the date range. If not provided, the component will use today's date if it falls within the range specified by minDate and maxDate, otherwise, it will default to minDate.
theme: This prop allows you to customize the appearance of the DateRangePicker. You can choose between "light-theme" (default) and "dark-theme".
onDateChange: This prop enables you to handle changes in the selected date range. The callback function receives an object containing the new start and end dates whenever the user interacts with the date picker.