You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Date Picker

A date picker is a calendar interface that allows users to select a single date or a date range.

View source

Sun	Mon	Tue	Wed	Thu	Fri	Sat
27	28	29	30	31	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	1	2	3	4	5	6

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

Name	Type	Default	Description
`datesSelectionBoxes`required	`IDatesSelectionBox[]`		This prop configures the portion to the right of the calendar, inside the datepicker dropdown
`applyLabel`	`string`	`"Apply"`	The text displayed inside the "Apply" button
`cancelLabel`	`string`	`"Cancel"`	The text displayed inside the "Cancel" button
`className`	`string`		CSS classes to set on the DatePicker outer most element
`clearLabel`	`string`	`"Clear"`	The text displayed inside the "clear" button
`days`	`string[]`	`['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']`	The label of each day of the week displayed in the calendar
`dropOptions`	`Partial<IDropOwnProps>`		Additional props to set on the underlying Drop component
`extraDropdownClasses`	`string[]`	`[]`	CSS classes to set on the DatePicker dropdown container
`extraDropdownToggleClasses`	`string[]`	`[]`	CSS classes to set on the DatePicker toggle button
`id`	`string`		A unique identifier that identifies the DatePicker in the PlasmaState. Useful to retrieve the selected value.
`initialDateRange`	`DatePickerDateRange`	`[]`	The dates initially selected. Eventhough no dates are set here by default, the current date will be selected by default
`initiallyUnselected`	`boolean`	`false`	Whether the datepicker is intially empty
`isClearable`	`boolean`	`false`	Whether the datepicker can be set to empty
`isLinkedToDateRange`	`boolean`		If set to false, it will sync both the lower and upper to the same value
`key`	`Key`
`label`	`string`		The text displayed in the downdown button when no dates are selected
`lowerLimitPlaceholder`	`string`	`"Select a start date"`	The text displayed in the start date text input when no start date is selected
`months`	`string[]`	`['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
`onRight`	`boolean`		When true, the dropdown will be aligned with the right edge of its opening button
`readonly`	`boolean`		When true, the datepicker will not be editable
`ref`	`LegacyRef<DatePickerDropdown>`
`renderDatePickerWhenClosed`	`boolean`	`true`	Whether the datepicker dropdown content is rendered when closed
`selectionRules`	`ICalendarSelectionRule[]`	`[]`	Selection rules that may restrict the dates available for selection
`setToNowTooltip`	`string`	`"Set to now"`	The text displayed when hovering over the set to now button
`simple`	`boolean`		If set to true, only the calendar will be visible
`startingDay`	`number`	`0`	The starting day of the week displayed in the calendar in the form of an index of the "days" array prop
`startingMonth`	`number`	`current month`	The month initially displayed in the calendar in the form of an index of the "months" array prop
`startingYear`	`number`	`current year`	The year initially displayed in the calendar in the form of an index of the "years" array prop
`toLabel`	`string`	`"to"`	The text displayed in between the 2 selected dates of a date range
`upperLimitPlaceholder`	`string`	`"Select an end date"`	The text displayed in the end date text input when no end date is selected
`withDrop`	`boolean`	`false`	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.
`years`	`string[]`	`30 years before and after today`	The list of years available in the calendar
`attributeName`deprecated	`string`		This was used in conjunction with the old Table component that is now deprecated

Examples

Single Date

Sun	Mon	Tue	Wed	Thu	Fri	Sat
27	28	29	30	31	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	1	2	3	4	5	6

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

Sun	Mon	Tue	Wed	Thu	Fri	Sat
27	28	29	30	31	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	1	2	3	4	5	6

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.

Type	Purpose
Single date	Used to select a specific day.
Date range	Used to select a period of time, ranging from one to multiple days.
With time selection	Single date and date range pickers can be configured to allow for hour and minute selection.

Edit guidelines