@spanglersoftware/easydatepicker v1.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.
Installation
npm install @spanglersoftware/easydatepickerUsage
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' | allselect any day displayed in the picker, even if it is not a day in the displayed monthmonthUsers can only select days in the month they belong to |
| 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* | 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* | 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/maxDateare 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