Simple datapicker library
npm install my-react-datapickercreate-react-appThe package can be installed via npm:
``text`
npm install my-react-datepicker --save
...or using yarn:
`text`
yarn add my-react-datepicker --save
- selectedDate (string): variable controlling the display of the date selected
- onChange (function): action triggered when changing date
- 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 (
onChange={setStartDate} //when day is clicked
/>
)
}
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);
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 (
currentMonth,
currentYear,
changeMonth,
changeYear,
prev,
next,
}) => (
value={months[currentMonth as unknown as number]}
onChange={({ target: { value } }) =>
changeMonth(months.indexOf(value))
}
>
{months.map((option) => (
))}
value={currentYear}
onChange={({ target: { value } }: any) => changeYear(value)}
>
{years.map((option) => (
))}
)}
/>
)