my-react-datapicker

simple dataPicker library of React components created using create-react-app

Installation

The package can be installed via npm:

npm install my-react-datepicker --save

...or using yarn:

yarn add my-react-datepicker --save

Node usage

• selectedDate (string): variable controlling the display of the date selected
• onChange (function): action triggered when changing date

optional

• customHeader (object): custom header of datapicker
• format (string): customize date format
• inputId (string): customize id
• monthsList (array): array of months
• yearsList (array): array of years

Here is a simple example, with report data injected directly as an object:

import React, { useState } from 'react';
import DatePicker from "my-react-datepicker";
const App = () => {
  const [value, setValue] = useState("")
  return (
      <Datapicker
        selectedDate={startDate} 
        onChange={setStartDate} //when day is clicked
      />
    )
}

Configuration

Examples

easy to use

 const [value, setValue] = useState("")
  const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ]
    const years = range(1990, getYear(new Date()) + 1, 1);
  <Datapicker
    dataFormat='DD/MM/YYYY'
    selectedDate={startDate}
    onChange={(value: any) => setValue(value)}
    monthsList={months}
    yearsList={years}
    />

You can customize dataPicker header with you own styles like:

 const [value, setValue] = useState("")
  const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ]
    const years = range(1990, getYear(new Date()) + 1, 1);
  return (
       <Datapicker selectedDate={startDate} onChange={setStartDate}
        customHeader={({
          currentMonth,
          currentYear,
          changeMonth,
          changeYear,
          prev,
          next,
        }) => (
          <div>
            <button onClick={prev}>
              {"<"}
            </button>
            <select
              value={months[currentMonth as unknown as number]}
              onChange={({ target: { value } }) =>
                changeMonth(months.indexOf(value))
              }
            >
              {months.map((option) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </select>
            <select
              value={currentYear}
              onChange={({ target: { value } }: any) => changeYear(value)}
            >
              {years.map((option) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </select>
            <button onClick={next} >
              {">"}
            </button>
          </div>
        )}
      />
    )