npm package: @spanglersoftware/easydatepicker
Description: React based date picker
Author: Spangler Software
Latest version: 1.0.4

# Easy Date Picker
The Easy Date Picker is an easy to use, versatile, and dynamic, unstyled, React based date picker/calendar component. The component only uses React and vanilla JS keeping it light and simple. i18N localization is supported for localized month and day names. The quick-start style guide can help in customizing your styles quickly. Visually, there is very little set in stone. The display is highly customizable through standard SASS/CSS stylings.

[Component Demonstration](https://spanglersoftware.com/easydatepicker)

## Installation
```
npm install @spanglersoftware/easydatepicker
```

## Usage
```
import DatePicker from '@spanglersoftware/easydatepicker';
...
<DatePicker {props} />
```

## Properties
| Property  | Required? | Type  | Default | Description |
| ------ | :-------------: | --- | :--: | ----------- |
| selectedDate | No | `Date`/`NULL`/`UNDEFINED` | Current Date | A Date representing which date is selected |
| isHovered | No | `boolean` | `true` | When present/true the date picker will be absolutely positioned relative to where the component is added in the DOM. Positioning is handled in the component making css overrides difficult |
| selectionPreference | No | `string` ('all' or 'month') | 'month' | <ul><li>all<ul><li>select any day displayed in the picker, even if it is not a day in the displayed month</li></ul></li><li>month<ul><li>Users can only select days in the month they belong to</li></ul></li></ul> | 
| addDayClassName | No | Callback: `(date:Date) => string/NULL/UNDEFINED` | `NULL` | Allows the developer to add custom `className` attributes to each day cell displayed in the picker | 
| addDayContent | No | Callback:`(date:Date) => ReactElement<any, any>/NULL/UNDEFINED` | `NULL` | Allows the developer to add custom content to each day cell displayed in the picker |
| onDateSelected | Yes | Callback:`(date:Date) => void` |  | A callback used to handle the event when a user selects a date from the picker |
| previousMonthButtonContent | No | Callback:`() => ReactElement<any, any>` |  `NULL` | A callback used to customize the previous month button in the picker's header |
| nextMonthButtonContent | No | Callback:`() => ReactElement<any, any>` | `NULL` | A callback used to customize the next month button in the picker's header |
| locale | No | `string` | 'en-US' | The locale to use for i18n formatting of month/day of week names
| isSingleMonthAdjusted | No | `boolean` | `false` | When `true` the changing previous/next month will only change by 1, otherwise it will change based on the `monthsDisplayed` value
| monthsDisplayed | No | `number` | 1 | The total number of months to display. The selected date is the first date and the picker will show all months following the current month if this value is greater than 0, limited to a maximum of 24 months. If a `minDate`/`maxDate` are provided, the display will be limited to only dates with those ranges |
| minDate<sup>*</sup> | No | `Date` | `NULL` | A date representing the minimum date in the picker. This limits the display of the calendar days, available months to choose from, and available years to choose from |
| maxDate<sup>*</sup> | No | `Date` | `NULL` | A date representing the maximum date in the picker. This limits the display of the calendar days, available months to choose from, and available years to choose from |

> If `minDate`/`maxDate` are not provided, the date picker will allow up to 40 years to choose from (20 past, 20 future), but the date picker will allow the user to go forward or backwards as much as they want with the previous/next month selectors

## Stylings
The package provides mechanisms to integrate styling quickly and easily. 

### CSS
If you are not using SASS, the dist/css folder contains css stylesheets to apply styles through imports, or use the easy-date-picker-empty.css to build your own styles. All the classes (except for custom addons) are built into the file so you can design it as you see best

```
node_modules/@spanglersoftware/easydatepicker/dist/css/[file]
```

#### easy-date-picker-modern.css
A clean and simple look

#### easy-date-picker-classic.css
An older styling similar to JQuery datepickers

#### easy-date-picker-plain.css
A CSS structure for quick custom design

### SASS
If your application is already using SASS, the prebuilt `scss` files can be used to quickly incorporate into your application. 

```
@forward node_modules/@spanglersoftware/easydatepicker/dist/sass/[file];
```

#### easydatepicker_modern.scss
A clean and simple look

#### easydatepicker_classic.scss
An older styling similar to JQuery datepickers

#### easydatepicker.scss
A SASS structure for quick custom design