Date-range-selector-for-react

Date-range-selector-for-react is a simple React package that provides UI for date range picker functionality.It is very easy to use.

Installation

Use the package manager npm to install date-range-selector-for-react

npm install date-range-selector-for-react

API Reference

Parameter	Type	Description
sd	setStartdate-function	Required. This is to get back start-date information.
ed	setEnddate-function	Required. This is to get back end-date information.
startYear	integer	Optional. This is to initialize start-year.
endYear	integer	Optional. This is to initialize end-year.

if you will not initiate startYear and endYear, it will automatically initiate

startYear =  (currentYear - 25) and endYear = (currentYear + 25).

Parameter	Type	Description
startDate	[DD MMM YYYY]	Optional. This is to initialize start-Date.
endDate	[DD MMM YYYY]	Optional. This is to initialize end-Date.

if you will not initiate startDate and endDate, it will not self initiate itself.

Parameter	Type	Description
showCalendar	boolean	Optional. This is show/hide calender box from consumer end.
showIcon	boolean	Optional. This is show/hide calender icon.
showDateRangeBox	boolean	Optional. This is show/hide calender Date-Range-Box.

Style

Parameter	Type	Description
styleBigContainer	css style	Optional. This is to style the calender container. Specially for controlling its position.
styleDateRangeBox	css style	Optional. This is to style the calender Date-Range-Box.
calHeaderBodyElement	HTML element	Optional. This is to configure calnder top most div for any other use.

Example-Code

import { useState, useEffect } from "react";
import "./App.css";

import DateRangeSelector from "date-range-selector-for-react";

function App() {
  let st = "1june 2022";
  let en = "1july 2022";

  const [startdate, setStartdate] = useState(st);
  const [enddate, setEnddate] = useState(en);
  const [showCalendar, setShowCalendar] = useState(true);

  useEffect(() => {
    console.log("start date: " + startdate);
    console.log("end date: " + enddate);
  }, [startdate, enddate]);

  useEffect(() => {
    console.log("showCalendar --> ", showCalendar);
  }, [showCalendar]);

  const reset = () => {
    setStartdate(st);
    setEnddate(en);
    window.location.reload();
  };

  return (
    <>
      <DateRangeSelector
        sd={setStartdate}
        ed={setEnddate}
        startYear={2010}
        endYear={2030}
        styleBigContainer={{}}
        startDate={startdate}
        endDate={enddate}
        showCalendar={showCalendar}
        showIcon={false}
        showDateRangeBox={true}
        styleDateRangeBox={{}}
        calHeaderBodyElement={<button> onClick={reset}>Reset-date</button>}
      />
      <button onClick={() => setShowCalendar(!showCalendar)}>Toogle</button>
    </>
  );
}

export default App;

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Author

• @sudhanshuranjan

Hi, I'm Sudhanhsu! 👋

🚀 About Me

I'm a full stack developer...