# react-date-picker-mc

> A simple and easy to use date picker build with React and dayjs

Latest version **0.0.10** (published 2023-07-24) · 0 weekly downloads

## Install

```sh
npm install react-date-picker-mc
pnpm add react-date-picker-mc
yarn add react-date-picker-mc
bun add react-date-picker-mc
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2023-07-24 |
| First published | 2023-07-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 109.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | maxencecalifano |

## Links

- npm: https://www.npmjs.com/package/react-date-picker-mc
- npm.io page: https://npm.io/package/react-date-picker-mc

## Dependencies (5)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.9
- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [react-icons](https://npm.io/package/react-icons.md) ^4.10.1
- [vite-plugin-dts](https://npm.io/package/vite-plugin-dts.md) ^3.3.1

## Recent versions

- 0.0.10 (latest) — 2023-07-24
- 0.0.9 — 2023-07-21
- 0.0.8 — 2023-07-21
- 0.0.7 — 2023-07-21
- 0.0.6 — 2023-07-21
- 0.0.5 — 2023-07-21
- 0.0.4 — 2023-07-21
- 0.0.3 — 2023-07-21
- 0.0.2 — 2023-07-21
- 0.0.1 — 2023-07-21

## README

# React Date Picker

A simple and easy to use date picker build with React and dayjs

![Static Badge](https://img.shields.io/badge/react-white?style=for-the-badge&logo=react&logoColor=61DAFB&color=181717)


## Features

- Display a calendar
- Select date
- Change month and year quickly with selector

## Installation

To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):

    $ npm install react-date-picker-mc
    $ yarn add react-date-picker-mc

    ⚠️ These component needs to receive a dayjs date object
    $ npm install daysjs
    $ yarn add daysjs

### Usage

The component needs two props: 

|   Props                       |  Types                            | Required             | Default        | Description                               |
|   --------------------------  |  -------------------------------  | --------------------:| -------------: | -----------------------------------------:|
| isOpen                     |  Bool                   | ✅                   |                | Boolean that indicates if the calendat tootip should be open or not |
| setIsOpen                         | function        |          ✅            |                | change the state of isOpen |
| date                         | Object       |          ✅            |                | A dayjs date object |
| setDate                         | function       |          ✅            |                | change the state of date |


```jsx
import { Datepicker } from 'react-date-picker-mc'
import "react-date-picker-mc/dist/style.css"

import dayjs from "dayjs";
import weekday from 'dayjs/plugin/weekday'
dayjs.extend(weekday)

function App() {
    const [date, setDate] = useState(dayjs())
    const [calendarIsOpen, setCalendarIsOpen] = useState(false)
  return (
    <div className="App">
        <Datepicker isOpen={calendarIsOpen} setIsOpen={setCalendarIsOpen} selectedDate={date} setSelectedDate={setDate} />
    </div>
  )
}

export default App

```


## 🔗 Links
[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://portfolio-maxencecalifano.vercel.app/)
[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/maxence-califano/)


[![github](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/MaxenceCalifano)

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