# itf-react-datepicker

> A date picker designed for the ITF website

Latest version **0.1.6** (published 2020-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install itf-react-datepicker
pnpm add itf-react-datepicker
yarn add itf-react-datepicker
bun add itf-react-datepicker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2020-02-21 |
| First published | 2020-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 233 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | icottam91 |
| Keywords | react, datepicker, calendar, date, react-component |

## Links

- npm: https://www.npmjs.com/package/itf-react-datepicker
- Repository: https://github.com/iancottam91/itf-react-datepicker
- Homepage: https://github.com/iancottam91/itf-react-datepicker#readme
- Issues: https://github.com/iancottam91/itf-react-datepicker/issues
- npm.io page: https://npm.io/package/itf-react-datepicker

## Dependencies (2)

- [react-select](https://npm.io/package/react-select.md) ^3.0.8
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2020-02-21
- 0.1.5 — 2020-02-21
- 0.1.4 — 2020-02-20
- 0.1.3 — 2020-02-20
- 0.1.2 — 2020-02-20
- 0.1.1 — 2020-02-20
- 0.1.0 — 2020-02-20

## README

# ITF React Datepicker

The datepicker developed for the ITF Website, check out the [DEMO](https://iancottam91.github.io/itf-react-datepicker)

## 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:

| 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!

---
_Source: https://npm.io/package/itf-react-datepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._