Code

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	❌
onChange	Function	❌
minDate	string (Format: mm/dd/yyyy)	❌
maxDate	string (Format: mm/dd/yyyy)	❌
date	string (Format: mm/dd/yyyy)	❌
autoposition	boolean	❌
format	'mm/dd/yyyy' 'dd/mm/yyyy' 'yyyy/mm/dd'	❌

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.

Event Response

Property	Data Type
id	string
name	string
value	'mm/dd/yyyy'
dateObj	Date

Code

<SingleDatePicker
  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}
/>

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.

Storybooksipster-react-component-storybook.netlify.app