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

Installation

The package can be installed via npm:

``text
npm install my-react-datepicker --save
`

...or using yarn:

`text
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

$3

- 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:

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

Configuration

Examples

easy to use

` tsx
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);
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:

`tsx
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 (
customHeader={({
currentMonth,
currentYear,
changeMonth,
changeYear,
prev,
next,
}) => (



)}
/>
)
``