Date Picker

The Date Picker component lets the user pick a date from a calender dropdown widget.

Overview

The Date Picker component lets the user pick a date from a calender dropdown widget.

September 2019MON273TUE284WED295THU306FRI317SAT18SUN2910111213151617181920212223241425262728293014 / 09 / 2019Select DateThe Date Picker component.

Usage

This component can be used as a standalone component or as part of a form, alongside other inputs.

Anatomy

Date Picker Input1September 2019MON273TUE284WED295THU306FRI317SAT18SUN2910111213151617181920212223241425262728293014 / 09 / 2019Select DateCalendar Widget2The Date Picker anatomy.
  1. Date Picker Input. This component displays the currently selected date.
  2. Calendar Widget. Provides a graphical way for the user to select a date.

Sizing & Spacing

The date picker component is sized to sit next to input components within a form.

Date Picker with Range Selection

The Date Picker with Range Selection component is very similar to the standard Date Picker. This component lets the user select both a start and end date, using two calendar widgets.

September 2019MON273TUE284WED295THU306FRI317SAT18SUN29101112131516171819202122232414252627282930October 2019MON273TUE284WED295THU306FRI317SAT18SUN29101112131516171819202122232414252627282930The Date Picker with Range component.

Basic Usage

<DatePicker
  startDate={new Date('11/01/2018')}
  onChange={() => { /* handle change */ }}
  placement={DATEPICKER_PLACEMENT.BELOW}
/>

Date Picker with Range Selection

<DatePicker
  onChange={() => { /* handle change */ }}
  placement={DATEPICKER_PLACEMENT.BELOW}
  isRange
/>

Date Picker Properties

NameTypeRequiredDefaultDescription
classNamen/aFalsen/aCustom CSS class to add to the date picker
isDisabledn/aFalseFalseIf true then the input is disabled
endDaten/aFalsen/aSelects the specified date as the end date
idn/aFalseuuid()ID for the input
isRangen/aFalsen/aSpecifies whether the date picker is a range selection implying that the user can select a start date and an end date
labeln/aFalseSelect DateLabel for the date picker input
namen/aFalsen/aName for the input
onBlurn/aFalsen/aCallback for when the input loses focus
onChangen/aFalsen/aCallback for when the start or end dates change
placementn/aFalseDATEPICKER_PLACEMENT.BELOWPosition of the date picker
startDaten/aFalsen/aSelects the specified date as the start date
valuen/aFalsen/aValue for the input