ITF React Datepicker

The datepicker developed for the ITF Website, check out the DEMO

Install and usage

Install it

``
yarn add itf-react-datepicker
`

Then use it

`
import React, { useState } from "react";
import DatePickerITF from "./DatePicker";

// add css - up to you how you do this
import '~/node_modules/itf-react-datepicker/dist/main.css';

const DatePickerExample = (props) => {
const { initialStartDate, initialEndDate } = props;
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);

return (
startDate={startDate}
endDate={endDate}
onDateChange={(startDate, endDate) => {
setStartDate(startDate);
setEndDate(endDate);
}}
/>
);
};

`

Props

Yo, this datepicker needs a wrapper that holds the state of the start and end dates. This gives you the flexibility to change the selected dates from your own code e.g. in a reset dates button.

Here are the props:

| prop | type | description |
|---|---|---|
| startDate | Date | The start date |
| endDate | Date | The end date |
| onDateChange | (startDate: Date | null, endDate: Date | null) => void | The callback when a date is selected in the datepicker |
| disabled? | boolean | is it disabled on not, duh |
| bemModifier? | string | a class for the datepicker, if you want it |
| elementId? | string` | an id for the datepicker, if you want it |

You should hold the state for startDate and endDate in your wrapper component and update it with onDateChange.

Let me know what you think in the issues!