Format

Props

Props	Data Type	Required
lang	string	❌
className	string	❌
label	string	❌
info	string	❌
id	string	✅
name	string	❌
helptext	string	❌
error	boolean	❌
errorMesage	string	❌
disabled	boolean	❌
readOnly	boolean	❌
activeOnChange	boolean	❌
onChange	Function	❌
minDate	string (Format: mm/dd/yyyy)	❌
maxDate	string (Format: mm/dd/yyyy)	❌
startDate	string (Format: mm/dd/yyyy)	❌
endDate	string (Format: mm/dd/yyyy)	❌
rangeLimit	number	❌
selectionMenu	boolean	❌
selectionMenuOptions	{ today: boolean; yesterday: boolean; last7Days: boolean; last30Days: boolean; thisMonth: boolean; lastMonth: boolean; }	❌
selectionMenuOptionsText	{ today: string; yesterday: string; last7Days: string; last30Days: string; thisMonth: string; lastMonth: string; }	❌
autoposition	boolean	❌
format	'mm/dd/yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd'	❌

Description

This component allows users to select a range of days in the calendar.

startDate and endDate

These props control the dates' selected range on the calendar, setting an initial and final date for the range.

minDate and maxDate

These props limit the range of selectable dates in the calendar by stablishing a minimum or/and maximum date.

autoposition

This feature allows developers to not worry about the correct location of the Menu or MenuBox component on the screen, because this will relocate it automatically, placing it on the top, bottom, right or left; it all depends on the available space.

activeOnChange

By default, this component is going to execute the onChange action after the user has selected both dates, start date and end date. Anyway, in the case, developers need to have access to the values while the user is still doing the action (selecting start date only), they can use this prop to receive a response in real-time while the user is interacting with the component.

selectionMenu

This option adds a menu to the calendar section, where the user can now select specific ranges of days.

This pre-selection ranges can be controlled using the selectionMenuOptions and selectionMenuOptionsText props.

Event Response

Property	Data Type
id	string
name	string
value	{ startDate: 'mm/dd/yyyy', endDate: 'mm/dd/yyyy' }
dateObj	{ startDate: Date, endDate: Date }

Code

<RangeDatePicker
  className="datePickerExample"
  errorMessage="Optional error message can offer better guidance."
  helptext="Optional help text can offer additional guidance."
  id="datePickerId"
  info="Lorem Ipsum"
  label="Date Picker Label"
  lang="en"
  name="datePickerName"
  onChange={changeEvent}
  selectionMenu
/>

Components Dependency

For this component elaboration there were used the following internal components:

• Text

• Telicon

• Label

• Button

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

Storybook