itf-react-datepicker

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<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  return (
    <DatePickerITF
      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:

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!