Theme

MCP Server

Getting started

Contributing

Breaking Changes

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

DatePicker

Figma

Github

Storybook

Aria pattern Legacy component

An input component that allows selecting a date from a popup calendar.

Importing

The component can be imported via:

import { DatePicker } from '@customerio/pluma-components/react';

The PlumaDatePicker component uses the @internationalized/date package for handling date values. This means it expects CalendarDate instances in the value prop, and returns them in the onChange callback as well.

A CalendarDate can be created using its constructor:

import { CalendarDate } from '@internationalized/date';

// January 30, 2012
const date = new CalendarDate(2012, 1, 30);

Or by parsing an ISO 8601 formatted string with the parseDate function:

import { parseDate } from '@internationalized/date';

const date = parseDate('2012-01-30');

When withTime is enabled, the component will return ZonedDateTime instances that include time and timezone information.

See the CalendarDate documentation or the ZonedDateTime documentation for more details.

A native Date object can be converted to a CalendarDate like this:

const nativeDate = new Date();

const date = new CalendarDate(
	nativeDate.getFullYear(), 
	nativeDate.getMonth() + 1, 
	nativeDate.getDate()
);

A CalendarDate can be converted back to a native Date object with the toDate method, for example:

import { getLocalTimeZone } from '@internationalized/date';

const date = new CalendarDate(2012, 1, 30);
const nativeDate = date.toDate(getLocalTimeZone());

For more information, see the CalendarDate conversion docs.

Usage

To use the date picker, at a minimum you must provide the following props:

value
- a CalendarDate or ZonedDateTime instance
onChange
- a function, which receives a CalendarDate or ZonedDateTime instance for the date selected in the calendar
label
- a string label to render above the date picker
- PlumaDatePicker extends from the PlumaTextField component, and also accepts ariaLabel as an alternative (see PlumaTextField docs for more details on accessibility)

For example:

Select a date

import { DatePicker } from '@customerio/pluma-components/react'
import { useState } from 'react'

export default function Example() {
	const [value, setValue] = useState(null);

	return <DatePicker
		label="Select a date"
		value={value}
		onChange={(value) => {
			setValue(value);
		}}
	/>
}

Date ranges

The date picker supports selecting date ranges, which can be enabled by setting the isRange prop to true.

When enabled, the value prop should be an object with start and end properties, each containing a CalendarDate instance.

Similarly, the value in the onChange callback will also be an object of that shape.

Date constraints

You can constrain the selectable dates in two ways:

Using minDate and maxDate

The simplest approach is to use the minDate and maxDate props to define a valid date range. Dates outside this range will be disabled and visually indicated. Users will not be able to select dates outside the specified range.

You can use either one or both constraints:

Use only minDate to enforce a minimum selectable date with no upper limit
Use only maxDate to enforce a maximum selectable date with no lower limit
Use both to restrict selection to a specific date range

Both minDate and maxDate accept a CalendarDate instance:

Select a date (limited range)

import { DatePicker } from '@customerio/pluma-components/react'
import { useState } from 'react'
import { CalendarDate, parseDate } from '@internationalized/date'

export default function Example() {
  const [value, setValue] = useState(null);
  // Set minimum date to 2 days ago
  const today = new Date();
  const twoDaysAgo = new Date(today);
  twoDaysAgo.setDate(today.getDate() - 2);
  
  // Set maximum date to 5 days in the future
  const fiveDaysFromNow = new Date(today);
  fiveDaysFromNow.setDate(today.getDate() + 5);
  
  // Convert to CalendarDate objects
  const minDate = new CalendarDate(
    twoDaysAgo.getFullYear(),
    twoDaysAgo.getMonth() + 1,
    twoDaysAgo.getDate()
  );
  
  const maxDate = new CalendarDate(
    fiveDaysFromNow.getFullYear(),
    fiveDaysFromNow.getMonth() + 1,
    fiveDaysFromNow.getDate()
  );

  return <DatePicker
    label="Select a date (limited range)"
    value={value}
    onChange={(value) => {
      setValue(value);
    }}
    minDate={minDate}
    maxDate={maxDate}
  />
}

You can also use just one constraint if needed:

Select a future date

import { DatePicker } from '@customerio/pluma-components/react'
import { useState } from 'react'
import { CalendarDate } from '@internationalized/date'

export default function Example() {
  const [value, setValue] = useState(null);
  
  // Only set a minimum date (today)
  const today = new Date();
  const minDate = new CalendarDate(
    today.getFullYear(),
    today.getMonth() + 1,
    today.getDate()
  );

  return <DatePicker
    label="Select a future date"
    value={value}
    onChange={(value) => {
      setValue(value);
    }}
    minDate={minDate}
  />
}

These constraints also work with date ranges:

Select dates within this month

import { DatePicker } from '@customerio/pluma-components/react'
import { useState } from 'react'
import { CalendarDate } from '@internationalized/date'

export default function Example() {
  const [value, setValue] = useState(null);
  
  // Set constraints for one month range
  const today = new Date();
  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
  
  const minDate = new CalendarDate(
    firstDayOfMonth.getFullYear(),
    firstDayOfMonth.getMonth() + 1,
    firstDayOfMonth.getDate()
  );
  
  const maxDate = new CalendarDate(
    lastDayOfMonth.getFullYear(),
    lastDayOfMonth.getMonth() + 1,
    lastDayOfMonth.getDate()
  );

  return <DatePicker
    label="Select dates within this month"
    value={value}
    onChange={(value) => {
      setValue(value);
    }}
    isRange={true}
    minDate={minDate}
    maxDate={maxDate}
  />
}

Using the isDateDisabled function

For more complex date constraints, you can use the isDateDisabled function prop. This gives you complete control over which dates are selectable.

The isDateDisabled function takes a CalendarDate parameter and should return true if the date should be disabled, or false if it should be enabled. It will take precedence over the minDate and maxDate props.

Select a weekday

import { DatePicker } from '@customerio/pluma-components/react'
import { useState } from 'react'
import { CalendarDate } from '@internationalized/date'

export default function Example() {
  const [value, setValue] = useState(null);
  
  // Disable weekends (Saturday and Sunday)
  const isDateDisabled = (date) => {
    // Get JavaScript day of week (0 = Sunday, 6 = Saturday)
    const day = date.toDate('America/Los_Angeles').getDay();
    return day === 0 || day === 6;
  };

  return <DatePicker
    label="Select a weekday"
    value={value}
    onChange={(value) => {
      setValue(value);
    }}
    isDateDisabled={isDateDisabled}
  />
}

Important notes about date constraints:

When using date constraints with range selection (isRange={true}), both the start and end dates must fall within the allowed range.
The date constraints are enforced for both manual selection and when using presets.
The constraints are visually indicated with a strikethrough style, so users can easily see which dates are unavailable.
If you programmatically set a value that contains dates outside the allowed range, they will still be displayed, but the user will be unable to select new dates outside the range.
Both minDate and maxDate are inclusive - users can select the exact date specified as the min/max boundary.

Select a date

import { DatePicker } from '@customerio/pluma-components/react'
import { useState } from 'react'

export default function Example() {
	const [value, setValue] = useState(null);

	return <DatePicker
		label="Select a date"
		value={value}
		onChange={(value) => {
			setValue(value)
		}}
		isRange={true}
	/>
}

Date range presets

To make it easier to select common date ranges, the date picker supports a withPresets prop, which will render a list of presets next to the calendar.

This is only available when isRange is true.

Select a date

import { DatePicker } from '@customerio/pluma-components/react'
import { useState } from 'react'

export default function Example() {
	const [value, setValue] = useState(null);

	return <DatePicker
		label="Select a date"
		value={value}
		onChange={(value) => {
			setValue(value)
		}}
		isRange={true}
		withPresets={true}
	/>
}

Custom presets

The list of presets shown can be customized, by passing an array of preset objects into the presets prop.

A preset object can be one of two types: relative or custom.

A relative preset requires:

type: 'relative'
- this key tells the date picker component to treat the preset as the "relative" type
label
- a string to show in the preset button
timeAgo
- an object to configure the relative date range to select when this button is clicked

timeAgo should contain two properties:

unit
- a string (a key from the @internationalized/date's DateTimeDuration type), one of 'years', 'months', 'weeks', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'.
value
- a number, the amount of unit to go back from today

A custom preset allows for more flexibility in creating the date range. It requires:

type: 'custom'
label
callback
- a function that returns an object with start and end properties, each containing a CalendarDate instance. This range will be set when the preset is clicked.
- the callback is called with an object containing the keys:
  - localTimeZone - a string representing the current time zone (either the local time zone, or the one set via the DatePicker's timeZone prop)

Select a date

import { 
	startOfMonth, 
	endOfMonth, 
	getLocalTimeZone, 
	today,
} from '@internationalized/date';
import { DatePicker } from '@customerio/pluma-components/react'
import { useState } from 'react'

export default function Example() {
	const [value, setValue] = useState(null);

	return <DatePicker
		label="Select a date"
		value={value}
		onChange={(value) => {
			setValue(value)
		}}
		isRange={true}
		withPresets={true}
		presets={[
			{
				type: 'relative',
				label: 'Last 3 days',
				timeAgo: {
					unit: 'days',
					value: 2
				}
			},
			{
				type: 'custom',
				label: 'Current month',
				callback: () => {
					const _today = today(getLocalTimeZone());
					const start = startOfMonth(_today);
					const end = endOfMonth(_today);
					return { start, end };
				}
			},
		]}
	/>
}

The default presets and preset types can also be imported from Pluma via:

import {
	PLUMA_DATE_PICKER_PRESET_LAST_24_HOURS,
	PLUMA_DATE_PICKER_PRESET_LAST_7_DAYS,
	PLUMA_DATE_PICKER_PRESET_LAST_30_DAYS,
	PLUMA_DATE_PICKER_PRESET_LAST_365_DAYS,
	// Selects the last 12 weeks, ending on today (included)
	PLUMA_DATE_PICKER_PRESET_LAST_12_WEEKS_FROM_NOW,
	// Selects the last 12 weeks, where each week starts on a Sunday
	PLUMA_DATE_PICKER_PRESET_LAST_12_FULL_WEEKS_SUNDAY_START,
	// An array containing the default presets used by the datepicker
	PLUMA_DATE_PICKER_DEFAULT_PRESETS,
} from '@customerio/pluma-components/react/date-picker'
import type {
	PlumaDatePickerPresetRelative,
	PlumaDatePickerPresetCustom,
	PlumaDatePickerPreset,
} from '@customerio/pluma-components/react/date-picker'

Enabling/disabling presets

By default, presets will be automatically disabled if their resulting date range falls (even partially) outside the date constraints set by minDate and maxDate. However, sometimes it's desirable to have the presets enabled anyway, allowing the selection of partial ranges.

The isPresetDisabled boolean can control this behavior. It can receive either:

a boolean value, which will apply to all presets
a function, which receives a preset object and its current calculated range, and should return a boolean indicating whether the preset should be disabled

Select a date

import { DatePicker, InlineStack } from '@customerio/pluma-components/react'
import { useState } from 'react'
import { today, getLocalTimeZone } from '@internationalized/date';

const minDate = today(getLocalTimeZone()).subtract({ days: 3 });

export default function Example() {
	const [value, setValue] = useState(null);

	return <InlineStack gap="200" alignBlock="center">
		<DatePicker
			label="Select a date"
			value={value}
			onChange={(value) => {
				setValue(value)
			}}
			isRange={true}
			withPresets={true}
			minDate={minDate}
		/>
		<DatePicker
			label="Select a date"
			value={value}
			onChange={(value) => {
				setValue(value)
			}}
			isRange={true}
			withPresets={true}
			minDate={minDate}
			isPresetDisabled={false}
		/>
	</InlineStack>;
}

Range length limits

By default, the date picker allows selecting a range of any length - including a single day. To enforce a minimum and/or maximum range length, the minRange and maxRange props can be used.

Both props accept multiple formats:

numbers - interpreted as a number of days
strings - strings of form "{quantity} {unit}", where unit is one of: days, weeks, months, years (e.g. "6 months", "2 weeks")
an @internationalized/date DateTimeDuration object

Select a date

import { DatePicker } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [value, setValue] = useState(null);

	return <DatePicker
		label="Select a date"
		value={value}
		onChange={(value) => {
			setValue(value)
		}}
		isRange={true}
		minRange={3}
		maxRange="3 weeks"
	/>
}

Time zones

By default, PlumaDatePicker will use the user's local time zone when working with dates: most importantly, determining what "today" is for pre-selecting today's date, calculating relative ranges etc.

However, sometimes it's necessary to show a DatePicker that refers to dates in a different time zone. To make sure the component handles disabled dates, presets, etc correctly, a localTimeZone string prop can be provided.

The time zone string is passed into Intl API calls, and should be an IANA time zone name. If an invalid time zone is provided, it will fall back to @internationalized/date's getLocalTimeZone function.

Select a date

import { DatePicker } from '@customerio/pluma-components/react';
import { useState } from 'react';
import { today } from '@internationalized/date';

export default function Example() {
	const [value, setValue] = useState(null);

	return <DatePicker
		label="Select a date"
		value={value}
		onChange={(value) => {
			setValue(value)
		}}
		isRange={true}
		withPresets={true}
    localTimeZone="Australia/Melbourne"
    maxDate={today('Australia/Melbourne')}
	/>
}

Customizing labels

If a string label is not sufficient, a component can be used to render the label.

In React, the label prop accepts any ReactNode.

Custom label

import { DatePicker, Icon } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState(null);

  return <DatePicker
    label={<>Custom label <Icon name="campaigns" isInline={true} size="sm" /></>}
    value={value}
    onChange={(value) => {
      setValue(value);
    }}
  />
}

Customizing descriptions

If a string description is not sufficient, a component can be used to render the description.

In React, the description prop accepts any ReactNode.

import { DatePicker, Link } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState(null);

  return <DatePicker
    ariaLabel="Custom description input"
    description={<>Custom description, <Link href="https://docs.customer.io" isExternal={true} variant="secondary">see docs for details</Link></>}
    value={value}
    onChange={(value) => {
      setValue(value);
    }}
  />
}

Customizing errors

If a string error is not sufficient, a component can be used to render the error.

In React, the error prop accepts any ReactNode.

import { DatePicker, Link } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState(null);

  return <DatePicker
    ariaLabel="Custom error input"
    error={<>Custom error, <Link href="https://docs.customer.io" isExternal={true} variant="secondary">see docs for help</Link></>}
    value={value}
    onChange={(value) => {
      setValue(value);
    }}
  />
}

API

`PlumaDatePicker` `extends TextField`

`ariaDescribedby` `string | undefined`

Element (or elements) that describe the form field. Also used for error messages, as aria-errormessage isn't supported in all assistive technologies: https://a11ysupport.io/tech/aria/aria-errormessage_attribute

`ariaLabel` `string | undefined`

String value that labels the form field.

`ariaLabelledby` `string | undefined`

Element (or elements) that label the form field.

`autofocus` `boolean | undefined`

Focuses automatically when the component is rendered. Should be used with care and only sparingly, as there are some accessibility concerns. More information here

`className` `string | undefined`

Additional classes to be applied to the top-level container. This is necessary as an argument in Ember, where we apply splattributes on the "input" itself, which means we can't pass a custom class to the containing element the classic way.

`defaultIsOpen` `boolean | undefined`

Whether the date picker should render in the open state.

`description` `ContentT | undefined`

A description for the field, providing additional context or hints.

`error` `boolean | ContentT | undefined`

An error message associated with the form field. Boolean: Ember-only. If the error named block is used, this prop can be set to true to indicate an error is present, which will make the error block render.

`iconColor` `"critical" | "caution" | "success" | "bold" | "button" | "navigation" | "inherit" | "white" | "information" | "feature" | "disabled" | "accent" | "base" | "invert" | "subtle" | "minimal" | undefined`

Default:subtle

A color to apply to the icon.

`id` `string | undefined`

An optional id to be assigned to the input element. Also used to generate ids for labels and error messages. If one isn't provided, it will be generated.

`isActive` `boolean | undefined`

Whether the input should render in an "active" styled state.

`isClearable` `boolean | undefined`

Whether the input element is clearable.

`isDateDisabled` `(date: CalendarDate) => boolean`

Function to determine if a date is disabled and cannot be selected. This takes precedence over minDate and maxDate if provided.

`isDisabled` `boolean | undefined`

Whether the form field is disabled.

`isInvalid` `boolean | undefined`

Whether the form field is in an invalid state.

`isLoading` `boolean | undefined`

Whether the input should show a loading spinner.

`isPresetDisabled` `boolean | ((preset: PlumaDatePickerPreset, range: { start?: CalendarDate | undefined; end?: CalendarDate | undefined; }) => boolean) | undefined`

By default, a preset will become disabled if its range cannot be fully selected (based on dates being disabled via minDate and maxDate). This allows overriding that behavior to enable/disable presets conditionally, or keep them always enabled. If a function is provided, it will be called with the preset and its calculated range, and should return a boolean. If the value is a boolean, it will apply to all presets.

`isRange` `boolean | undefined`

Whether the date picker should select date ranges.

`label` `ContentT | undefined`

The label text to show with the form field.

`localTimeZone` `string | undefined`

By default, the DatePicker uses the user's local time zone for calculating dates like "today". If the date picker represents dates in a different time zone, a time zone name can be provided here.

`maxDate` `CalendarDate`

The maximum selectable date.

`maxRange` `string | number | DateTimeDuration | undefined`

The maximum range length that must be selected. By default, there is no maximum range length. It accepts multiple formats:

numbers - interpreted as a number of days
strings - strings of form "quantity unit", where unit is one of: days, weeks, months, years (e.g. "6 months", "2 weeks")
an @internationalized/date DateTimeDuration object

`minDate` `CalendarDate`

The minimum selectable date.

`minRange` `string | number | DateTimeDuration | undefined`

The minimum length of a time range that must be selected. By default, there is no minimum range length (essentially 0 - same day selection allowed). It accepts multiple formats:

numbers - interpreted as a number of days
strings - strings of form "quantity unit", where unit is one of: days, weeks, months, years (e.g. "6 months", "2 weeks")
an @internationalized/date DateTimeDuration object

`name` `string | undefined`

The name attribute is used for HTML forms

`onBlur` `((event: Event & { target: HTMLInputElement; }) => void) | undefined`

The blur event handler for the input element.

`onChange` `(value: CalendarDate | { start: CalendarDate, end: CalendarDate } | ZonedDateTime | null) => void`

Callback fired when the date selection changes.

`onClear` `(() => unknown) | undefined`

In addition to isClearable, this function is required to render the clear button. This will be called when the clear button is clicked.

`onFocus` `((event: Event & { target: HTMLInputElement; }) => void) | undefined`

The focus event handler for the input element.

`onInput` `((event: Event & { target: HTMLInputElement; }) => void) | undefined`

The input event handler for the input element.

`placeholder` `string | null | undefined`

Placeholder text to show inside the field.

`popoverAnimationTransitionDuration` `number | undefined`

The duration (in ms) for the popover animation.

`popoverMiddlewareOptions` `'PopoverMiddlewareOptions'`

Middleware options for the PlumaPopover component.

`presets` `(PlumaDatePickerPresetRelative | PlumaDatePickerPresetCustom)[]`

An array of presets to render instead of the default ones.

`shouldAllowAutofill` `boolean | undefined`

Whether to allow browser autofill and password managers. When false (default), adds attributes to disable password managers (1Password, LastPass, Bitwarden, Dashlane). Set to true for fields where autofill is desired (e.g., email, password, address fields).

`callback` `(opts?: PlumaDatePickerPresetCustomCallbackOptions | undefined) => { start: CalendarDate; end: CalendarDate; }` (required)

A callback function that returns the start and end dates for the preset. The dates must be @internationalized/date CalendarDates.

`label` `string` (required)

The text to show for the preset button.

`type` `"custom"` (required)

The type of preset.

DatePicker

PlumaDatePicker extends TextField

ariaDescribedby string | undefined

ariaLabel string | undefined

ariaLabelledby string | undefined

autofocus boolean | undefined

className string | undefined

defaultIsOpen boolean | undefined

description ContentT | undefined

error boolean | ContentT | undefined

iconColor "critical" | "caution" | "success" | "bold" | "button" | "navigation" | "inherit" | "white" | "information" | "feature" | "disabled" | "accent" | "base" | "invert" | "subtle" | "minimal" | undefined

id string | undefined

isActive boolean | undefined

isClearable boolean | undefined

isDateDisabled (date: CalendarDate) => boolean

isDisabled boolean | undefined

isInvalid boolean | undefined

isLoading boolean | undefined

isPresetDisabled boolean | ((preset: PlumaDatePickerPreset, range: { start?: CalendarDate | undefined; end?: CalendarDate | undefined; }) => boolean) | undefined

isRange boolean | undefined

label ContentT | undefined

localTimeZone string | undefined

maxDate CalendarDate

maxRange string | number | DateTimeDuration | undefined

minDate CalendarDate

minRange string | number | DateTimeDuration | undefined

name string | undefined

onBlur ((event: Event & { target: HTMLInputElement; }) => void) | undefined

onChange (value: CalendarDate | { start: CalendarDate, end: CalendarDate } | ZonedDateTime | null) => void

onClear (() => unknown) | undefined

onFocus ((event: Event & { target: HTMLInputElement; }) => void) | undefined

onInput ((event: Event & { target: HTMLInputElement; }) => void) | undefined

placeholder string | null | undefined

popoverAnimationTransitionDuration number | undefined

popoverMiddlewareOptions 'PopoverMiddlewareOptions'

presets (PlumaDatePickerPresetRelative | PlumaDatePickerPresetCustom)[]

shouldAllowAutofill boolean | undefined

shouldAppendAriaDescribedbyId boolean | undefined

shouldAppendAriaLabelledbyId boolean | undefined

shouldAutoFocusCalendar boolean | undefined

shouldShowPasswordVisibilityToggle boolean | undefined

shouldValidateLabelPresence boolean | undefined

size "small" | "medium" | "sm" | "md" | undefined

type string | undefined

unsafe_componentName string | undefined

unsafe_descriptionClassName string | undefined

unsafe_errorClassName string | undefined

unsafe_fieldClassName string | undefined

unsafe_footerClassName string | undefined

unsafe_hasLabelBlock boolean | undefined

unsafe_inputClassName string | undefined

unsafe_inputSize number | undefined

unsafe_inputWrapperClassName string | undefined

unsafe_isLegacy boolean | undefined

unsafe_labelClassName string | undefined

unsafe_popoverStyle Record<string, unknown> | undefined

value CalendarDate | { start: CalendarDate, end: CalendarDate } | ZonedDateTime | null

withCenterBaseline boolean | undefined

withPresets boolean | undefined

withTime boolean | undefined

wrapperModifier any

wrapperRef any

label string (required)

timeAgo { value: number; unit: keyof DateTimeDuration; } (required)

type "relative" (required)

callback (opts?: PlumaDatePickerPresetCustomCallbackOptions | undefined) => { start: CalendarDate; end: CalendarDate; } (required)

label string (required)

type "custom" (required)

On this page

`PlumaDatePicker` `extends TextField`

`ariaDescribedby` `string | undefined`

`ariaLabel` `string | undefined`

`ariaLabelledby` `string | undefined`

`autofocus` `boolean | undefined`

`className` `string | undefined`

`defaultIsOpen` `boolean | undefined`

`description` `ContentT | undefined`

`error` `boolean | ContentT | undefined`

`iconColor` `"critical" | "caution" | "success" | "bold" | "button" | "navigation" | "inherit" | "white" | "information" | "feature" | "disabled" | "accent" | "base" | "invert" | "subtle" | "minimal" | undefined`

`id` `string | undefined`

`isActive` `boolean | undefined`

`isClearable` `boolean | undefined`

`isDateDisabled` `(date: CalendarDate) => boolean`

`isDisabled` `boolean | undefined`

`isInvalid` `boolean | undefined`

`isLoading` `boolean | undefined`

`isPresetDisabled` `boolean | ((preset: PlumaDatePickerPreset, range: { start?: CalendarDate | undefined; end?: CalendarDate | undefined; }) => boolean) | undefined`

`isRange` `boolean | undefined`

`label` `ContentT | undefined`

`localTimeZone` `string | undefined`

`maxDate` `CalendarDate`

`maxRange` `string | number | DateTimeDuration | undefined`

`minDate` `CalendarDate`

`minRange` `string | number | DateTimeDuration | undefined`

`name` `string | undefined`

`onBlur` `((event: Event & { target: HTMLInputElement; }) => void) | undefined`

`onChange` `(value: CalendarDate | { start: CalendarDate, end: CalendarDate } | ZonedDateTime | null) => void`

`onClear` `(() => unknown) | undefined`

`onFocus` `((event: Event & { target: HTMLInputElement; }) => void) | undefined`

`onInput` `((event: Event & { target: HTMLInputElement; }) => void) | undefined`

`placeholder` `string | null | undefined`

`popoverAnimationTransitionDuration` `number | undefined`

`popoverMiddlewareOptions` `'PopoverMiddlewareOptions'`

`presets` `(PlumaDatePickerPresetRelative | PlumaDatePickerPresetCustom)[]`

`shouldAllowAutofill` `boolean | undefined`

`shouldAppendAriaDescribedbyId` `boolean | undefined`

`shouldAppendAriaLabelledbyId` `boolean | undefined`

`shouldAutoFocusCalendar` `boolean | undefined`

`shouldShowPasswordVisibilityToggle` `boolean | undefined`

`shouldValidateLabelPresence` `boolean | undefined`

`size` `"small" | "medium" | "sm" | "md" | undefined`

`type` `string | undefined`

`unsafe_componentName` `string | undefined`

`unsafe_descriptionClassName` `string | undefined`

`unsafe_errorClassName` `string | undefined`

`unsafe_fieldClassName` `string | undefined`

`unsafe_footerClassName` `string | undefined`

`unsafe_hasLabelBlock` `boolean | undefined`

`unsafe_inputClassName` `string | undefined`

`unsafe_inputSize` `number | undefined`

`unsafe_inputWrapperClassName` `string | undefined`

`unsafe_isLegacy` `boolean | undefined`

`unsafe_labelClassName` `string | undefined`

`unsafe_popoverStyle` `Record<string, unknown> | undefined`

`value` `CalendarDate | { start: CalendarDate, end: CalendarDate } | ZonedDateTime | null`

`withCenterBaseline` `boolean | undefined`

`withPresets` `boolean | undefined`

`withTime` `boolean | undefined`

`wrapperModifier` `any`

`wrapperRef` `any`

`label` `string` (required)

`timeAgo` `{ value: number; unit: keyof DateTimeDuration; }` (required)

`type` `"relative"` (required)

`callback` `(opts?: PlumaDatePickerPresetCustomCallbackOptions | undefined) => { start: CalendarDate; end: CalendarDate; }` (required)

`label` `string` (required)

`type` `"custom"` (required)