Using DataPicker

Easy steps to have your input data as a calendar.

I have used Datapicker for my project and the documentation its fine but the problem for me was to find the full installation of it. Everywhare tells you that you can use (npm install react-datepicker — save) to have it but there was no css to it.

This are the 3 steps that you have to do to have a full funtional and good looking calendar input on your react projects.

1- Installation

The package can be installed via NPM:

npm install react-datepicker --save

Or by using Yarn:

yarn add react-datepicker

2-On your App.js add:

import 'bootstrap/dist/css/bootstrap.min.css'

3- Just use the codumentation to add the code you need for your app.

You can use the default one which is ok for something simple:

() => {
/const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={date => setStartDate(date)} />
);
};