A simple and reusable Datepicker component for ReactJS (Demo)
npm i @rnwonder/react-date-picker
yarn add @rnwonder/react-date-picker
pnpm add @rnwonder/react-date-picker
This package depends on react
and react-dom
so you need to have them installed
import '@rnwonder/react-date-picker/dist/style.css'
import DatePicker from "@rnwonder/react-date-picker";
const App = () => {
return (
<DatePicker
onChange={(data) => {
if (data.type === "range") {
console.log(data.startDate, data.endDate);
}
if (data.type === "single") {
console.log(data.selectedDate);
}
if (data.type === "multiple") {
console.log(data.multipleDates);
}
}}
/>
);
};
- You can style the datepicker using class props, color props, default css class names or data attributes.
- Check out the documentation for more details
- We have a growing list of themes you can use. Please check them out here
- We have some other props that can be useful when working with the datepicker. Please check them out here
- Formatting the datepicker input label is done with the
formatInputLabel
,formatInputLabelRangeStart
,formatInputLabelRangeEnd
,localOptions
andlocale
props - Check out the documentation for more details
- We have some utility functions that can be useful when working with the datepicker. Please check them out here