npm package: @pkostukevich/modsen-date-picker
Description: ## [Demo](https://pkostukevich-datepicker-test.netlify.app)
Author: Polina Kostukevich
Latest version: 1.5.1



# DatePicker and RangePicker library

## [Demo](https://pkostukevich-datepicker-test.netlify.app)

Example of usage Date and Range Picker: [Booking form](https://pkostukevich-datepicker-test.netlify.app).

[Storybook](https://67a5a66aa6532008240a91b4-eshpaarcfj.chromatic.com/)


## Features

- **Default Calendar**: A default calendar with month display.
- **Single Date Selection**: Select a date with a user-friendly interface.
- **Date Range Selection**: Select a date range for the calendar.
- **Week Start Selection**: Choose the starting day of the week (Monday or Sunday).
- **Calendar View Types**: Switch between different calendar views (weeks, months).
- **Task Management**: Double click on a specific day to add a list of tasks and save them in localStorage.
- **Navigation**: Navigate to the previous/next week/month/year.
- **Date Constraints**: Set a maximum and minimum date for the calendar.
- **Weekend Visibility**: Show/hide weekend days and highlight holidays with a different color.
- **Date Navigation**: Jump to a user-specified date in the calendar.
- **Date Propagation**: Pass a specific date to set the calendar date and vice versa, allowing users to use the date they input in the application.
- **Calendar Styling**: Customize the appearance of the calendar by selecting accent color.

### Installation
The package can be installed via npm:

```
npm install @pkostukevich/modsen-date-picker
```

Or via yarn:

```
yarn add @pkostukevich/modsen-date-picker
```

### Configuration
This library provides DatePicker and RangePicker components. The most basic use of the DatePicker with default props can be described with:

```
<DatePicker />
```
Use ```minDate, maxDate``` in format ```dd/mm/yyyy``` to set calendar limits: 
```
<DatePicker minDate={minDate} maxDate={maxDate} />
```
Include ```input ```(true/false) prop to select date with input:
```
<DatePicker input={true} />
```
Highlight weekends with  ```weekends```(true/false) prop:
```
<DatePicker weekends={true} />
```
You can pass an array of holidays to ```holidays``` prop:
```
interface IHoliday {
  name: string;
  date: {
    day: number;
    month: number;
  };
}
const holidays: IHolidays[] = [
{
    date: {
      day: 1,
      month: 0
    },
    name: 'New Year'
  },
  ...
]
<DatePicker holidays={holidays} />
```

You can pass color in HEX format to set custom accent color ```color``` prop:
```
<DatePicker color="#FFFFFF" />
```
Set start week day by passing ```startWeekDay``` prop 
```
<DatePicker startWeekday={0} /> // week starts from Sunday (by default)
<DatePicker startWeekday={1} /> // week starts from Monday
```

Set calendar period view by setting ```period``` prop 
```
<DatePicker period="month" /> // 42 days displayed (by default)
<DatePicker period="week" /> // 7 days displayed
```

You can add a task list to each day and call it by double click:
```
<DatePicker tasks={true} />
```

RangePicker is available by using ```RangePicker``` component
```
<RangePicker />
```
RangePicker supports ```weekends```, ```holidays```, ```input``` in format From/To and changing theme ```color```.