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>
)}
/>
)