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

Single date with input

Date range

Resources

Install


yarn add @activecampaign/camp-components-date-picker

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.

Single date (standalone date picker)


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

Date with input

The date picker component can be used with Camp’s input component to allow the user to type a date in, or open the calendar for date selection.

Note the direct use of react-popper, focus-trap-react and @reach/portal. Camp’s popover component has functionality that is causing issues with DatePicker, and we have a discovery ticket open for that. Once those are solved, you should use Camp’s popover component instead and we will update these docs.

In terms of the date formatting and the input, an engineer can use whatever tool works best (or whatever the platform requires). Camp’s date picker uses date-fns, and we show minimally in the code example below how to parse, format and validate (frontend) dates using that package.


import React, { useState, useRef } from 'react';
import { format, isValid, parse } from 'date-fns';
import { usePopper } from 'react-popper';
import FocusTrap from 'focus-trap-react';
import { Portal } from '@reach/portal';
import { DatePicker } from '@activecampaign/camp-components-date-picker';
import styled from '@activecampaign/camp-core-styled';
import Input from '@activecampaign/camp-components-input';
import { CalendarEvent } from '@activecampaign/camp-components-icon';
 
export const metadata = {
  sidebarTitle: 'Camp 1',
}
 
export const DatePickerWithInput = () => {
  const [isPopperOpen, setIsPopperOpen] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const [selected, setSelected] = useState<Date>();
 
  const popperRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
  const popper = usePopper(popperRef.current, popperElement, {
    placement: 'bottom-start',
  });
 
  const closePopper = () => {
    setIsPopperOpen(false);
    buttonRef?.current?.focus();
  };
 
  const handleInputChange = (e) => {
    setInputValue(e.currentTarget.value);
    const date = parse(e.currentTarget.value, 'MM/dd/yy', new Date());
    if (isValid(date)) {
      setSelected(date);
    } else {
      setSelected(undefined);
    }
  };
 
  const handleDaySelect = (date) => {
    setSelected(date);
    if (date) {
      setInputValue(format(date, 'MM/dd/yy'));
      closePopper();
    } else {
      setInputValue('');
    }
  };
 
  const CalendarButtonStyled = styled('button')({
    background: 'none',
    border: 'none',
    cursor: 'pointer',
  });
 
  function CalendarButton() {
    return (
      <CalendarButtonStyled onClick={handleInputClick}>
        <CalendarEvent size="small" title="Open Calendar" />
      </CalendarButtonStyled>
    );
  }
 
  const handleInputClick = () => {
    setIsPopperOpen(true);
  };
 
  return (
    <div ref={popperRef}>
      <Input
        label="Enter Date"
        placeholder={format(new Date(), 'MM/dd/yy')}
        value={inputValue}
        onChange={handleInputChange}
        onClick={handleInputClick}
        suffix={<CalendarButton />}
      />
      {isPopperOpen && (
        <Portal>
          <FocusTrap
            active
            focusTrapOptions={{
              initialFocus: false,
              allowOutsideClick: true,
              clickOutsideDeactivates: true,
              onDeactivate: closePopper,
            }}
          >
            <div
              tabIndex={-1}
              style={popper.styles.popper}
              className="dialog-sheet"
              {...popper.attributes.popper}
              ref={setPopperElement}
              role="dialog"
            >
              <DatePicker
                handleSetSelected={handleDaySelect}
                selectedDate={selected}
              />
            </div>
          </FocusTrap>
        </Portal>
      )}
    </div>
  );
};

Date range

Below shows a date range picker using Camp’s <Input> like in the example above. See example above for the note on the popover choices and date formatting.


import React, { useState, useRef } from 'react';
import { Portal } from '@reach/portal';
import { usePopper } from 'react-popper';
import FocusTrap from 'focus-trap-react';
import { DateRange, SelectRangeEventHandler } from 'react-day-picker';
import { format } from 'date-fns';
import styled from '@activecampaign/camp-core-styled';
import { DatePicker } from '@activecampaign/camp-components-date-picker';
import Input from '@activecampaign/camp-components-input';
import { CalendarEvent } from '@activecampaign/camp-components-icon';
 
export const DateRangePicker = () => {
  const [isPopperOpen, setIsPopperOpen] = useState(false);
  const [selectedRange, setSelectedRange] = useState<DateRange>();
  const [fromValue, setFromValue] = useState<string>('');
  const [toValue, setToValue] = useState<string>('');
 
  const popperRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
  const popper = usePopper(popperRef.current, popperElement, {
    placement: 'bottom-start',
  });
 
  const closePopper = () => {
    setIsPopperOpen(false);
    buttonRef?.current?.focus();
  };
 
  const handleRangeSelect: SelectRangeEventHandler = (range: DateRange | undefined) => {
    setSelectedRange(range);
    if (range?.from) {
      setFromValue(format(range.from, 'MM/dd/yy'));
    } else {
      setFromValue('');
    }
    if (range?.to) {
      setToValue(format(range.to, 'MM/dd/yy'));
    } else {
      setToValue('');
    }
  };
 
  const CalendarButtonStyled = styled('button')({
    background: 'none',
    border: 'none',
    cursor: 'pointer',
  });
 
  function CalendarButton() {
    return (
      <CalendarButtonStyled onClick={handleInputClick} id="calendar-button">
        <CalendarEvent size="small" title="Open Calendar" />
      </CalendarButtonStyled>
    );
  }
 
  const handleInputClick = () => setIsPopperOpen((value) => !value);
 
  const InputStyled = styled(Input)({
    '& input': {
      cursor: 'pointer',
    },
    '& label': {
      display: 'block',
    },
  });
 
  return (
    <div ref={popperRef}>
      <InputStyled
        label="Enter Date"
        placeholder={format(new Date(), 'MM/dd/yy')}
        value={fromValue ? `${fromValue} - ${toValue}` : 'Enter Date Range'}
        onChange={handleRangeSelect}
        onClick={handleInputClick}
        suffix={<CalendarButton />}
        onKeyDown={(e) => {
          e.key === 'Enter' ? setIsPopperOpen((value) => !value) : e.preventDefault();
        }}
      />
      {isPopperOpen && (
        <Portal>
          <FocusTrap
            active
            focusTrapOptions={{
              allowOutsideClick: true,
              clickOutsideDeactivates: true,
              onDeactivate: closePopper,
            }}
          >
            <div
              tabIndex={-1}
              style={popper.styles.popper}
              className="dialog-sheet"
              {...popper.attributes.popper}
              ref={setPopperElement}
              role="dialog"
            >
              <DatePicker
                mode="range"
                handleSetSelected={handleRangeSelect}
                selectedDate={selectedRange}
              />
            </div>
          </FocusTrap>
        </Portal>
      )}
    </div>
  );
};

Accessibility

Keyboard support

If using date picker with Camp’s 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 months and enter or space to select
tab can also be used to focus on current day, or if a date is already selected, will focus on the currently selected date
Using the arrow keys will navigate through the dates in the calendar, and enter or space is used to select a new date which closes the date picker