Date Picker

Examples

Default

Select a date

dd/mm/yyyy

Code

1<DatePicker id="datepicker-1" label="Select a date" value={value} onChange={setValue} />

With value set

Select a date

dd/mm/yyyy

Code

1<DatePicker id="datepicker-2" label="Select a date" value={value} />

Defined selectable months and years in the dropdown

Select a date

dd/mm/yyyy

Code

1<DatePicker id="datepicker-2" label="Select a date" fromYear={2020} toYear={2030} />

Initial month

Select a date

dd/mm/yyyy

Code

1<DatePicker id="datepicker-22" label="Select a date" initialMonth={new Date(2024, 8)} />

Selectable dates within a range

Select a date

dd/mm/yyyy

Code

1<DatePicker id="datepicker-24" label="Select a date" minDate={new Date(2023, 8, 11)} maxDate={new Date(2023, 8, 26)} />

With field declaration

Select a date (required)

dd/mm/yyyy

Select a date (optional)

dd/mm/yyyy

Code

1<DatePicker id="datepicker-3r" label="Select a date" declaration="required" />
2
3<DatePicker id="datepicker-3o" label="Select a date" required={false} declaration="optional" />

With a different form control size applied

Select a date

dd/mm/yyyy

Select a date

dd/mm/yyyy

Select a date

dd/mm/yyyy

Code

1<DatePicker id="datepicker-4" label="Select a date" size="small" />
2<DatePicker id="datepicker-5" label="Select a date" />
3<DatePicker id="datepicker-6" label="Select a date" size="large" />

With a different label size applied

Select a date

dd/mm/yyyy

Select a date

dd/mm/yyyy

Select a date

dd/mm/yyyy

Code

1<DatePicker id="datepicker-7" label="Select a date" labelSize="small" />
2<DatePicker id="datepicker-8" label="Select a date" />
3<DatePicker id="datepicker-9" label="Select a date" labelSize="large" />

With a different calendar size applied

Select a date

dd/mm/yyyy

Select a date

dd/mm/yyyy

Select a date

dd/mm/yyyy

Code

1<DatePicker id="datepicker-10" label="Select a date" calendarSize="small" />
2<DatePicker id="datepicker-11" label="Select a date" />
3<DatePicker id="datepicker-12" label="Select a date" calendarSize="large" />

With label element hidden

Select a date

dd/mm/yyyy

Code

1<DatePicker id="datepicker-13" label="Select a date" labelHidden />

With label context applied

Select a date Type the date string in dd/mm/yyyy

dd/mm/yyyy

Code

1<DatePicker id="datepicker-14" label="Select a date" labelContext="Type the date string in dd/mm/yyyy" />

With error validation

Select a date

dd/mm/yyyy

This is error text

Code

1<DatePicker id="datepicker-15" label="Select a date" error errorText="This is error text" />

As a disabled form control

Select a date

dd/mm/yyyy

Code

1<DatePicker id="datepicker-16" label="Select a date" disabled />

Development

Import by:

1import { DatePicker } from '@parsley_design_systems/design-system'

Available props

Props for the DatePicker component
Property	Type	Default	Required	Description
label	string		true	The primary content to describe the form control, the label must display a meaningful description to ensure the form control is correctly understood by users.
id	string		true	The unique id of the form control.
onChange	function		true	Fires the onChange event of the form control. Must contain a Date() string or be undefined.
className	string		false	Allows for specific classNames to be set.
name	string		false	The name of the form control.
value	Date() string or ''		false	Contains the Date() string or empty value. If no value set the calendar displays on the current date.
fromYear	Year - YYYY	Current year - YYYY	false	Sets the minimum selectable year, default is the current year.
toYear	Year - YYYY	YYYY + 5	false	Sets the maximum selectable year, default is the current year plus 5 years.
initialMonth	Month in Date() format	Current month	false	Sets the month to be displayed when the calendar appears.
minDate	Date()		false	Sets the minimum date range to select a date - dates outside are disabled.
maxDate	Date()		false	Sets the maximum date range to select a date - dates outside are disabled.
size	oneOf: default \| small \| large	default	false	Sets the size of the form control and the associated label text, this prop controls the font size and padding of the form control. If not set "default" is output as the default setting.
required	boolean		true	A boolean that applies an aria-required value on the form control.
declaration	required \| option			Displays required or optional text next to the associated label.
width	oneOf: See Sizing for form width tokens.	default	false	Sets the width of the form control, this props controls the width of the form control. If not set width defaults to 100%.
containerWidth	boolean		true	Controls where the width is defined - true is for the width applied to the component parent container which then limits the width of the label, form control, error and support text. The default is false which sets the width only on the form control.
disabled	boolean		false	The disabled state of the form control.
error	boolean		false	The error state of the form control.
errorText	string		false	Provides the error message to be presented to users to help them correct the erroneous form control. This value will only be output when the "error" boolean props is set to true.
labelSize	oneOf: default \| small \| large	default	false	Sets the size of the label, this props controls the font size of the label. If not set "default" is output as the default setting.
labelHidden	boolean	false	false	A boolean that visually hides the form control label. This should only be considered if the form control is clearly described by adjacent content/labels.
labelContext	string		false	Allows for additional instructions to be inserted into the label element, this content is visually hidden and can be used to provide additional context to a form control for assistive technolgy users.
calendarSize	oneOf: default \| small \| large	default	false	Sets the size of the calendar. If not set "default" is output as the default setting.
ref	string		false	Allows a ref to be set on the form control.
Other attributes	Allowable attributes			The following attributes can be used when required, these attributes are all valid HTML5 attributes. Allowed attributes: autocomplete inputmode name pattern

Date Picker

Examples

Default

Code

With value set

Code

Defined selectable months and years in the dropdown

Code

Initial month

Code

Selectable dates within a range

Code

With field declaration

Code

With a different form control size applied

Code

With a different label size applied

Code

With a different calendar size applied

Code

With label element hidden

Code

With label context applied

Code

With error validation

Code

As a disabled form control

Code

Design

Problem

Solution

Guidance

Development

Available props