# modsen-datepicker

> React datepicker library

Latest version **1.0.5** (published 2023-05-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install modsen-datepicker
pnpm add modsen-datepicker
yarn add modsen-datepicker
bun add modsen-datepicker
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-05-20 |
| First published | 2023-05-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 145.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Viachaslau Ihnatsiuk |
| Maintainers | viachaslauihnatsiuk |
| Keywords | react, datepicker, calendar, date, react-component |

## Links

- npm: https://www.npmjs.com/package/modsen-datepicker
- npm.io page: https://npm.io/package/modsen-datepicker

## Dependencies (3)

- [uuid](https://npm.io/package/uuid.md) ^9.0.0
- [date-fns](https://npm.io/package/date-fns.md) ^2.30.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.9

## 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.0.5 (latest) — 2023-05-20
- 1.0.4 — 2023-05-20
- 1.0.3 — 2023-05-20
- 1.0.2 — 2023-05-20
- 1.0.1 — 2023-05-20
- 1.0.0 — 2023-05-20

## README

# Date Picker library for React

Stylish Date Picker with built-in ToDo-list for React

![](https://firebasestorage.googleapis.com/v0/b/collections-management-app.appspot.com/o/date-picker.jpg?alt=media&token=15b858f1-00e8-402d-8351-cc5e2b65de14)

## Storybook

[Here](https://viachaslau-ihnatsiuk-date-picker.netlify.app/) you can see the possibilities of date picker library and options for settings.

## Installation

```
$ npm install modsen-datepicker --save
```

## Usage

To get started, you need to import the `DatePicker` or `RangeDatePicker` component from the `modsen-datepicker` library.

```js
import { DatePicker, RangeDatePicker } from 'modsen-datepicker';

const App = () => {
	return (
		<>
			<DatePicker />
			<RangeDatePicker />
		</>
	);
};
```

## Configuration

Getting date from Date Picker:

```js
import { useState } from 'react';
import { DatePicker } from 'modsen-datepicker';

const App = () => {
	const [value, setValue] = useState();

	return <DatePicker onChange={(date) => setValue(date)} />;
};
```

## Props for Date Picker

|  Prop name   |                    <div style="width:200px">Description</div>                     |          Available values           | Default value |
| :----------: | :-------------------------------------------------------------------------------: | :---------------------------------: | :-----------: |
|     type     |                              Sets the calendar view                               |           'month', 'year'           |    'month'    |
|  weekStart   |                       Sets the day on which the week starts                       |         'monday', 'sunday'          |   'monday'    |
| minDateValue |           Sets the minimum date that will be available in the calendar            | String value in format 'mm.dd.yyyy' | '01.01.1900'  |
| maxDateValue |           Sets the maximum date that will be available in the calendar            | String value in format 'mm.dd.yyyy' | '31.12.2025'  |
|   onChange   | Function called when the user enters date in date input or picks date in calendar |     (value) => setVAlue(value)      |       -       |

## Additional props for Range Date Picker

|     Prop name      |                    <div style="width:200px">Description</div>                     |          Available values           | Default value |
| :----------------: | :-------------------------------------------------------------------------------: | :---------------------------------: | :-----------: |
|   startDateValue   |                              Sets default start date                              | String value in format 'mm.dd.yyyy' |       -       |
|    endDateValue    |                               Sets default end date                               | String value in format 'mm.dd.yyyy' |       -       |
| onRangeInputChange | Function called when the user enters date in date input or picks date in calendar |     (value) => setVAlue(value)      |       -       |

### Browser Support

The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.

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