# react-datepicker-clean

> A clean datepicker for react

Latest version **2.3.0** (published 2019-12-28) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2019-12-28 |
| First published | 2019-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 138 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Martin Björling |
| Maintainers | blueprintswe |
| Keywords | datepicker, react, date, picker |

## Links

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

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

- 2.3.0 (latest) — 2019-12-28
- 2.2.2 — 2019-12-06
- 2.2.1 — 2019-12-06
- 2.2.0 — 2019-12-06
- 2.1.0 — 2019-12-06
- 2.0.0 — 2019-12-06

## README

# React DatePicker

A simple and configurable datepicker made for React, free from any dependencies other than React.

## Installation

Install it from [npm](https://github.com/npm/cli) and include it in your React build process (using [Webpack](https://webpack.js.org/), [Browserify](http://browserify.org/), etc):
```sh
npm install --save react-datepicker-clean
```
**Note** that [React](https://reactjs.org/) is needed in the project for this component to work and must be installed separately since it is not included in the package.

## Usage

Most basic usage:
```jsx
import React from "react";
import DatePicker from "react-datepicker-clean";

class Example extends React.Component {
  constructor(props) {
    this.state = {
      dates: []
    };
  }

  handleChange = dates => {
    this.setState({ dates });
  };

  render() {
    return (
      <DatePicker
        onDateClick={this.handleChange}
      />
    );
  }
}
```

### Properties

This datepicker has a number of properties that can be used

**Mandatory properties:**

name | type | description 
--- | --- | ---
`onDateClick` | Function | Function to use when user clicks a date. <br>Must take array of dates as argument.

**Optional properties:**

name | type | default value | description 
--- | --- | --- | ---
`weekStart` | number<0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6> | `0` | Indicates which day is the first day of the week. `0` is Sunday, `6` is Saturday.
`weekHoliday` | number<-1 \| 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | `0` | Indicates which date that should be designated weekly holiday (default red number instead of black). `0` is Sunday, `6` is Saturday. Set to `-1` to disable this option.
`showWeekNumber` | boolean | `true` | Set to `false` to hide week numbers.
`multiChoice` | boolean | `false` | Set to `true` if the user should be able to choose more than one date.
`multiSpan` | boolean | `false` | Set to `true` to make the choose a span of dates instead of multiple single dates. Disabled if `multiChoice` is set ti `false`.
`allowBefore` | boolean | `false` | Set to `true` if the user should be allowed to choose dates before the current date.
`chosenDates` | Array<Date \| string \| number> | `[]` | Any dates that should be chosen already. Can use same `state` element array that is updated in `onDateClick`. Elements can be Date object, [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) date string, UNIX timestamp or an array containing two dates. If the element is an array of two dates, all dates between (and including) the two dates will be marked.
`blockedDates` | Array<Date \| string \| number> | `[]` | Any dates that should be blocked from selecting. Elements can be Date object, [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) date string, UNIX timestamp or an array containing two dates. If the element is an array of two dates, all dates between (and including) the two dates will be marked.
`holidayDates` | Array<Date \| string \| number> | `[]` | Any holidays that should be marked as holiday (default red number instead of black). Elements can be Date object, [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) date string, UNIX timestamp or an array containing two dates. If the element is an array of two dates, all dates between (and including) the two dates will be marked.
`yearsDiff` | number | `100` | How many years should be visible in years list (before if `allowBefore` is set to `true` and) after the current year.
`locale` | string | `'en'` | Locale to use. List of available locales can be found [here](https://github.com/blueprint1985/react-datepicker-clean/blob/master/docs/locales.md). Use the value in the "Code" column.
## ToDo:

* Add custom styling properties.

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