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

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

1. Update the package: replace @activecampaign/camp-components-date-picker with @camp/date-picker
2. Update all imports from @activecampaign/camp-components-date-picker to @camp/date-picker
3. 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.

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

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

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”)