# react-input-datepicker

> A simple and reusable input datepicker component for React

Latest version **1.1.2** (published 2020-08-15) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2020-08-15 |
| First published | 2019-07-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 49.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | JMcAmmond |
| Maintainers | deathspuz |
| Keywords | reactjs, datepicker, react, datepicker-component, input, date |

## Links

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

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.13.1

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

- 1.1.2 (latest) — 2020-08-15
- 1.1.1 — 2020-08-10
- 1.1.0 — 2020-08-10
- 1.0.8 — 2019-07-23
- 1.0.7 — 2019-07-19
- 1.0.6 — 2019-07-19
- 1.0.5 — 2019-07-19
- 1.0.4 — 2019-07-19
- 1.0.3 — 2019-07-18
- 1.0.2 — 2019-07-17
- 1.0.1 — 2019-07-17
- 1.0.0 — 2019-07-16

## README

[![NPM](https://img.shields.io/npm/v/react-input-datepicker.svg)](https://www.npmjs.com/package/react-input-datepicker)
![npm bundle size](https://img.shields.io/bundlephobia/min/react-input-datepicker)
![GitHub contributors](https://img.shields.io/github/contributors/jmcammond/react-input-datepicker)
![npm](https://img.shields.io/npm/dt/react-input-datepicker)
![NPM](https://img.shields.io/npm/l/react-input-datepicker)

# react-input-datepicker

A simple and reusable input datepicker component for React ([Demo](https://jeffmcammond.com/react-input-datepicker/))

![Input Datepicker](https://github.com/jmcammond/react-input-datepicker/raw/master/example/assets/input-datepicker.png 'Input Datepicker')

## Install

```bash
npm install react-input-datepicker
```

## Usage

```tsx
import React, { useState, useCallback } from 'react';
import InputDatepicker from 'react-input-datepicker';

export const App = () => {
  const [value, setValue] = useState<Date | null>();

  const onDateChange = useCallback((date: Date) => {
    setValue(date);
  }, []);

  return (
    <InputDatepicker
      value={value}
      onDateChange={onDateChange}
      minDate={new Date(1900, 0, 1)}
      maxDate={new Date()}
    />
  );
};
```

## Available Props

| Prop             | Type    | Default                                   | Options                                                                                                    |
| ---------------- | ------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| value            | Date    | -                                         | -                                                                                                          |
| onDateChange     | func    | -                                         | -                                                                                                          |
| minDate          | Date    | -                                         | -                                                                                                          |
| maxDate          | Date    | -                                         | -                                                                                                          |
| maxDateMessage   | string  | 'Date must be less than {maxDate + 1}'    | -                                                                                                          |
| minDateMessage   | string  | 'Date must be greater than {minDate - 1}' | -                                                                                                          |
| invalidMessage   | string  | 'Not a valid date'                        | -                                                                                                          |
| showLabels       | boolean | true                                      | true, false                                                                                                |
| showErrors       | boolean | true                                      | true, false                                                                                                |
| showPlaceholders | boolean | true                                      | true, false                                                                                                |
| format           | string  | 'month/day/year'                          | 'day/month/year', 'day/year/month', 'month/day/year', 'month/year/day', 'year/month/day', 'year/day/month' |
| labels           | Object  | English labels                            | { year: 'Year'; month: 'Month'; day: 'Day'; }                                                              |

## License

MIT © [JMcAmmond](https://github.com/JMcAmmond)

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