Form

Date Picker

A date picker is a calendar interface that allows users to select a single date or a date range.
1
import {
2
CalendarSelectionRuleType,
3
DATES_SEPARATOR,
4
DatePickerDropdownConnected,
5
IDatesSelectionBox,
6
ICalendarSelectionRule,
7
} from '@coveord/plasma-react';
8
import moment from 'moment';
9
10
export default () => (
11
<DatePickerDropdownConnected
12
id="range-date-picker"
13
datesSelectionBoxes={selectionOptions}
14
selectionRules={rules}
15
initiallyUnselected
16
isClearable
17
label="Select a date range"
18
/>
19
);
20
21
const selectionOptions: IDatesSelectionBox[] = [
22
{
23
title: 'Select a date range',
24
quickOptions: [
25
{
26
label: 'Last Week',
27
value: () => moment().subtract(1, 'week').toDate().toString() + DATES_SEPARATOR + new Date().toString(),
28
},
29
{
30
label: 'Last day',
31
value: () => moment().subtract(1, 'day').toDate().toString() + DATES_SEPARATOR + new Date().toString(),
32
},
33
],
34
isRange: true,
35
withTime: false,
36
hasSetToNowButton: true,
37
},
38
];
39
40
const rules: ICalendarSelectionRule[] = [
41
{
42
test: (date: Date) => date <= new Date() && date >= moment().subtract(2, 'weeks').toDate(), // the date is within the last two weeks
43
isFor: CalendarSelectionRuleType.all,
44
},
45
{
46
test: (date: Date, endDate: Date) => moment(endDate).diff(moment(date), 'day') >= 0, // The end date cannot be before the start date
47
isFor: CalendarSelectionRuleType.upper,
48
},
49
];

Props

NameTypeDefaultDescription
datesSelectionBoxesrequiredIDatesSelectionBox[]
This prop configures the portion to the right of the calendar, inside the datepicker dropdown
applyLabelstring"Apply"
The text displayed inside the "Apply" button
cancelLabelstring"Cancel"
The text displayed inside the "Cancel" button
classNamestring
CSS classes to set on the DatePicker outer most element
clearLabelstring"Clear"
The text displayed inside the "clear" button
daysstring[]['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
The label of each day of the week displayed in the calendar
dropOptionsPartial<IDropOwnProps>
Additional props to set on the underlying Drop component
extraDropdownClassesstring[][]
CSS classes to set on the DatePicker dropdown container
extraDropdownToggleClassesstring[][]
CSS classes to set on the DatePicker toggle button
idstring
A unique identifier that identifies the DatePicker in the PlasmaState. Useful to retrieve the selected value.
initialDateRangeDatePickerDateRange[]
The dates initially selected. Eventhough no dates are set here by default, the current date will be selected by default
initiallyUnselectedbooleanfalse
Whether the datepicker is intially empty
isClearablebooleanfalse
Whether the datepicker can be set to empty
isLinkedToDateRangeboolean
If set to false, it will sync both the lower and upper to the same value
keyKey
labelstring
The text displayed in the downdown button when no dates are selected
lowerLimitPlaceholderstring"Select a start date"
The text displayed in the start date text input when no start date is selected
monthsstring[]['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
The list of months available in the calendar
onBeforeApply() => void
A callback function that is executed before applying a new selection of dates
onRightboolean
When true, the dropdown will be aligned with the right edge of its opening button
readonlyboolean
When true, the datepicker will not be editable
refLegacyRef<DatePickerDropdown>
renderDatePickerWhenClosedbooleantrue
Whether the datepicker dropdown content is rendered when closed
selectionRulesICalendarSelectionRule[][]
Selection rules that may restrict the dates available for selection
setToNowTooltipstring"Set to now"
The text displayed when hovering over the set to now button
simpleboolean
If set to true, only the calendar will be visible
startingDaynumber0
The starting day of the week displayed in the calendar in the form of an index of the "days" array prop
startingMonthnumbercurrent month
The month initially displayed in the calendar in the form of an index of the "months" array prop
startingYearnumbercurrent year
The year initially displayed in the calendar in the form of an index of the "years" array prop
toLabelstring"to"
The text displayed in between the 2 selected dates of a date range
upperLimitPlaceholderstring"Select an end date"
The text displayed in the end date text input when no end date is selected
withDropbooleanfalse
Whether the dropdown should be rendered using the Drop component. Using the Drop component can be useful to render the dropdown content outside of the standard DOM tree. This can be needed when rendering a datepicker inside a Modal and you want the dropdown content to display above or outside the Modal's natural perimeter.
yearsstring[]30 years before and after today
The list of years available in the calendar
attributeNamedeprecatedstring
This was used in conjunction with the old Table component that is now deprecated

Examples

Single Date
1
import {
2
CalendarSelectionRuleType,
3
DatePickerDropdownConnected,
4
IDatesSelectionBox,
5
ICalendarSelectionRule,
6
} from '@coveord/plasma-react';
7
import moment from 'moment';
8
9
export default () => (
10
<DatePickerDropdownConnected
11
id="single-date-picker"
12
datesSelectionBoxes={selectionOptions}
13
selectionRules={rules}
14
initiallyUnselected
15
isClearable
16
label="Select a date"
17
isLinkedToDateRange={false}
18
/>
19
);
20
21
const selectionOptions: IDatesSelectionBox[] = [
22
{
23
title: 'Select a date',
24
isRange: false,
25
withTime: false,
26
hasSetToNowButton: true,
27
},
28
];
29
30
const rules: ICalendarSelectionRule[] = [
31
{
32
test: (date: Date) => moment(date).day() > 0 && moment(date).day() < 6, // the date is not a week-end day
33
isFor: CalendarSelectionRuleType.all,
34
},
35
];
Disabled
1
import {DatePickerDropdownConnected} from '@coveord/plasma-react';
2
3
export default () => (
4
<DatePickerDropdownConnected
5
id="readonly-date-picker"
6
datesSelectionBoxes={[
7
{
8
title: 'Select a date',
9
isRange: true,
10
withTime: true,
11
},
12
]}
13
readonly
14
/>
15
);

Guidelines

Whenever possible, provide ready-made selections of the most contextually relevant values (e.g., last week, last month, etc.).

Variations

The choice of date picker type depends on the input you want to submit and on the precision required.

TypePurpose
Single dateUsed to select a specific day.
Date rangeUsed to select a period of time, ranging from one to multiple days.
With time selectionSingle date and date range pickers can be configured to allow for hour and minute selection.
Edit guidelines