DateRangePicker

A customizable React date range picker component.

Table of Contents

• Installation
• Usage
  • Basic Example
• Props

Installation

Install the package using npm:

npm i mui-input-date-range-picker

Usage

Basic Example

Here is a simple example of how to use the DateRangePicker component in your React application:

import React, { useState } from "react";
import DateRangePicker from "mui-input-date-range-picker";

const App = () => {
  const [dateRange, setDateRange] = useState({
    startDate: null,
    endDate: null,
  });

  return (
    <div>
      <h1>Date Range Picker Example</h1>
      <DateRangePicker value={dateRange} onChange={setDateRange} />
    </div>
  );
};

export default App;

Props

Name	Type	Default	Description
onChange	func	null	Callback function to handle the date range change.
initialDateRange	object	{}	Initial date range with startDate and endDate.
minDate	date	new Date(2000, 0, 1)	Minimum selectable date.
maxDate	date	new Date(2030, 11, 31)	Maximum selectable date.
highlightColor	string	"#1faf4a"	Color used to highlight selected dates.
timezone	string	America/New_York	Time zone for the date range picker.
label	string	"Select date range"	Label for the date range picker input field.
isFutureDates	boolean	false	Picker will use default future date ranges

Contributors