🎯 Usage

Allows the user to select a date or range of dates. Date picker consists of two components (1) an input field for entering the date(s) or to open the calendar dropdown (2) a calendar component for selecting a date(s).

🎭 Behaviour

Start & End Dates: When selecting a date range the start and end dates are highlighted in solid colors for better clarity.
Cancel & Confirm: The cancel and confirm buttons are optional and set to visible by default.
Selecting Month & Year: Users may select and change the month or year by entering a date in the input box or by using their corresponding dropdowns. Alternatively, users can use the left and right arrows beside the month and year select to navigate across the adjacent months. We offer 3 variations for a month and year select: duo-dropdown, year-only, and arrows-only.
Current Date Indication: The current date is outlined in grey, this remains outlined even if it isn’t the select date / in the selected range of dates.
Default Date: If unconfigured, the default value of the date picker should be set to the current date, else if previously configured displays the prior selected date.

Property	Type	Default Value	Description
`multiMonth`	`boolean`	`false`	Sets dropdown to multi-month mode, shows two months side-by-side
`isRange`	`boolean`	`false`	Toggles between selecting a single date vs. a range of dates
`date`	`DateObject`	`current_date`	Sets the date of the calendar, set to the current date if unconifgured
`showConfirm`	`boolean`	`true`	Toggles between displaying the cancel and confirm buttons or not
`monthYearMode`	`string`	`month-year \\| year-only \\| none`	Selects the mode to use for selecting month and year in the calendar. There are 3 modes: dropdown select month and year plus arrow controls, dropdown select year only arrow controls for month, and no dropdown arrow controls only.

Date Picker