npm package: @nikitos32/date-picker-library
Description: Modsen Date Picker Library with different types of Calendars
Author: Nikita
Latest version: 1.0.25

# Modsen DatePicker

## Сontent

- [Functionality](#Functionality)
- [Installation](#Installation)
- [Usage](#Usage)
- [Using Tachnologies](#Using-Tachnologies)

#### Functionality:

- Viewing the calendar;
- Selecting a range for the calendar;
- Default calendar with a preset range;
- The ability to choose the beginning of the week (from Monday or Sunday);
- Select the type of calendar (by week, month, etc.);
- When you click on a certain day, the task list is added and saved in localStorage;
- The ability to switch to the previous(th)/next(th) week/month/year;
- The ability to select the maximum date of the calendar;
- The ability to select the minimum date for the calendar;
- The ability to hide/show weekends and highlight holidays in a different color;
- The ability to switch to the date entered by the user in the calendar;
- The ability to skip a certain date to set the date and vice versa, use the date entered by the user in the application;

#### Installation:

Before installing, download and install Node.js. Node.js 10 or higher is required.

If this is a brand new project, make sure to create a package.json first with the npm init command.

Installation is done using the npm install command:
`npm i @nikitos32/date-picker-library`

#### Usage

### DayCalendar

```

<DayCalendar
  withTodos={false}
  handleOnClickDateInputValue={handleOnClickDateInputValue}
  datePickerInputValue={startDateValue}
  startDate={startDateValue}
  endDate={endDateValue}
/>
```

| Props                                         | Type                                                                                                              | Description                                                       |
| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `withTodos`                                   | `boolean`                                                                                                         | allows you to control todos section                               |
| `startDate`                                   | `string`                                                                                                          | allows you to pass string that will be the `start` day in a range |
| `endDate`                                     | `string`                                                                                                          | allows you to pass string that will be the `end` day in a range   |
| `handleOnClickDateInputValue`                 | `(date: string, inputId: string) => void)`                                                                        | allows you to set Day click handle                                |
| `shiftIndex`                                  | `1(from Sunday) or 2(from Monday)`                                                                                | allows you to handle from what day the week will start            |
| `dayStyle`                                    | `{dayColor: string, dayBackgroundColor: string}`                                                                  | allows you to handle day styling                                  |
| `calendarWrapperStyle`                        | `{  wrapperBackgroundColor?: string, wrapperBorderColor?: string, wrapperWidth?: string, wrapperHeight?: string}` | allows you to handle calendar wrapper styling                     |
| `withMonth, withWeek, withYear, withHolidays` | `boolean`                                                                                                         | decide display section or not                                     |
| `datePickerInputValue`                        | `string`                                                                                                          | provide default value to day calendar                             |

### DatePicker

```

const [value, setValue] = useState("2024-12-09");

 const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

 const onClear = () => {
    setValue("");
  };

  const onClickDay = (date: string) => {
    setValue(date);
  };

<DatePicker
  value={value}
  onChange={onChange}
  onClear={onClear}
  onClickDay={onClickDay}
    />
```

| Props      | Type                                                | Description                                                       |
| ---------- | --------------------------------------------------- | ----------------------------------------------------------------- |
| value      | `string`                                            | provide a value to set controlled input                           |
| onChange   | `(e: React.ChangeEvent<HTMLInputElement>) => void)` | provide a `onChange` handler if you pass `value` value            |
| onClear    | `() => void`                                        | provide a `onClear` handler to controll clear functionality       |
| onClickDay | `(date: string) => void`                            | provide a `onClickDay` handler to controll dayClick functionality |
| maxDate    | `string`                                            | pass max date for input                                           |
| minDate    | `string`                                            | pass min date for input                                           |

### RangePicker

```

<RangePicker
  minDate={minDate}
  maxDate={maxDate}
  startDate={startDateValue}
  endDate={endDateValue}
  shiftIndex={shiftIndex}
/>
```

| Props      | Type                            | Description                              |
| ---------- | ------------------------------- | ---------------------------------------- |
| minDate    | `string`                        | provide a value to set `min date`        |
| maxDate    | `string`                        | provide a value to set `max date`        |
| startDate  | `string`                        | provide a value to set `start date`      |
| endDate    | `string`                        | provide a value to set `end date`        |
| shiftIndex | `1(from Sunday), 2(fromMonday)` | decide from what day the week will start |

## Using Technologies

- **_node.js_** - is a software platform based on the V8 engine (translating JavaScript into machine code);
- **_babel_** - a transpiler that converts code from one standard to another;
- **_eslint_** - linter for JavaScript code;
- **_prettier_** - a tool for auto-formatting code;
- **_husky_** - a modern solution for managing Git hooks;
- **_commitlint_** - is a tool that checks commit messages for compliance with generally accepted standards of their descriptions;
- **_yarn_** - package manager;
- **_rollup_** - ES module builder;
- **_storybook_** - is a tool used to develop user interface components in isolation;
- **_react_** - JavaScript library for creating user interfaces;
- **_typescript_** - strongly typed language to reduce the number of potential bugs;
- **_styled-components_** - react component styling system;
- **_jest_** - framework for unit testing;
- **_react testing library_** - is a library for integration testing.