Date Picker

The date picker allows users to enter a date or date range either through text input or choosing a date from a calendar.

Overview

Resources

Install


yarn add @camp/date-picker

Upgrading to Next Gen

The @camp/date-picker package is a 1:1 migration from @activecampaign/camp-components-date-picker with no API changes.

🧩 Same API: All props remain the same — mode, selectedDate, handleSetSelected, headerPrevDisabled, headerNextDisabled, locale, defaultMonth, and today
🎨 Updated styling: The component now uses the latest Camp Design System visual styles
🔆 New themed prop: Allows users to enable light and dark theming for the Date Picker component. More about theming here.

Previous Implementation


import { DatePicker } from '@activecampaign/camp-components-date-picker';
 
<DatePicker mode="single" selectedDate={selected} handleSetSelected={handleDaySelect} />;

New Implementation


import { DatePicker } from '@camp/date-picker';
 
<DatePicker mode="single" selectedDate={selected} handleSetSelected={handleDaySelect} />;

Migration Steps

Update the package: replace @activecampaign/camp-components-date-picker with @camp/date-picker
Update all imports from @activecampaign/camp-components-date-picker to @camp/date-picker
No prop changes are required — the API is identical

Variations

Date pickers let users select a date or range of dates from a calendar. A date picker is great for allowing the user to enter a date by merely clicking on a date in the pop-up calendar, instead of having to remember a specific date off-hand.

The calendar also provides validation of dates by visually restricting date ranges, and ensures that the input is filled in with the proper format. The date picker component can be used with an input component to allow the user to type a date in, or open the calendar for date selection.

Toggle theming

Prop: themed
Type: boolean
Default value: false

The themed prop enables light and dark mode support for the Date Picker component. This is useful for applications that support theme switching, such as AI agent interfaces or other areas with dark mode capabilities.

When to use themed:

✅ If you need light and dark mode support, use themed={true}. This is useful in AI agent interfaces or other areas with dark mode capabilities.
❌ If you need light mode support only, themed is not required as it is set to false by default. This is useful in standard application areas that only support light mode.
🔨 If light mode support is not working as expected, try explicitly setting themed={false} (and check that your component has been updated to the latest version).

Behavior:

With themed={true}: Date Picker will respond to theme changes and display appropriate colors for light/dark modes
Without themed prop: Date Picker will always display in light mode styling, regardless of the current theme


import { DatePicker } from '@camp/date-picker';
 
<DatePicker themed mode="single" selectedDate={selected} handleSetSelected={handleDaySelect} />;

Single Date


import React, { useState } from 'react';
import { DatePicker } from '@camp/date-picker';
 
export const SingleDatePicker = () => {
  const [selected, setSelected] = useState<Date>();
 
  return (
    <DatePicker
      mode="single"
      selectedDate={selected}
      handleSetSelected={(date) => setSelected(date)}
    />
  );
};

Date Range


import React, { useState } from 'react';
import { DatePicker } from '@camp/date-picker';
import type { DateRange } from 'react-day-picker';
 
export const DateRangePicker = () => {
  const [range, setRange] = useState<DateRange>();
 
  return (
    <DatePicker
      mode="range"
      selectedDate={range}
      handleSetSelected={(r) => setRange(r)}
    />
  );
};

Multiple Dates


import React, { useState } from 'react';
import { DatePicker } from '@camp/date-picker';
 
export const MultipleDatePicker = () => {
  const [dates, setDates] = useState<Date[]>();
 
  return (
    <DatePicker
      mode="multiple"
      selectedDate={dates}
      handleSetSelected={(d) => setDates(d)}
    />
  );
};

Usage

Set up ThemeProvider

The Date Picker component requires a styled-components ThemeProvider to be set up in your application. This is required regardless of whether you plan to use theming features. See the Styled Components & ThemeProvider guide for more details on setting up the ThemeProvider.

Note: Even if you don’t need theming support, you still need the ThemeProvider wrapper. The Date Picker component will default to light mode styling, unless you explicitly set the themed prop to true.

Best Practices

Use the date picker when users need to select a specific date or date range
Pair with an input component to allow manual date entry as an alternative to the calendar
Use mode="single" for selecting a single date, mode="range" for date ranges, and mode="multiple" for selecting multiple individual dates
Set headerPrevDisabled or headerNextDisabled to restrict navigation when date boundaries are needed
Use the locale prop to support internationalization

Content Guidelines

✅ DO

Use date picker for selecting specific calendar dates
Provide a text input alongside the calendar for manual entry
Restrict selectable date ranges when appropriate
Use clear date format patterns (e.g. MM/dd/yy)

🚫 DON’T

Don’t use date picker for approximate time periods — use a dropdown instead
Don’t leave date pickers without validation for required fields
Don’t use date picker when only a month or year is needed
Don’t hide the calendar behind multiple clicks

Accessibility

Keyboard Support

If using date picker with an input component, tab to focus on the input, and tab again to focus on the calendar trigger
Use enter or space to open the calendar
tab to focus on the previous or next month navigation buttons and enter or space to activate
tab can also be used to focus on the current day, or if a date is already selected, will focus on the currently selected date
Use the arrow keys to navigate through the dates in the calendar
enter or space to select a date, which closes the date picker
Navigation buttons include accessible labels (“Go to previous month”, “Go to next month”)