Usage

Date selection

• Upon clicking a trigger, the calendar pop-out should display with the current date range highlighted
• Clicking on any date will select that date for the active text input
• Dates that are not available cannot be selected, e.g., you cannot schedule a post in the past or review metrics/data in the future

Single date selection

In general, after a date selection has been made, the date picker should disappear or the user's focus should shift, see below for guidelines for specific experiences:

• Single selection date pickers displayed within a Popout: Popout closes
• Single selection date pickers displayed inline: no visual change

Live Editor

function SingleDatePickerWithPopoutExample() {
  const [isShown, setIsShown] = React.useState(false);
  const [stateDate, setDate] = React.useState(moment());

  const onFocusChange = ({ focused }) => setIsShown(focused);

  const handleDateChange = (date) => {
    setDate(date);
  };

  const setStatusText = visibleMonths => "Now showing: " + visibleMonths.map(moment => moment.format("MMMM YYYY")).join(' and ');

  return (
    <Box display="flex" justifyContent="center">
      <Popout
        isOpen={isShown}
        setIsOpen={setIsShown}
        content={
          <Popout.Content p={0} pt={400}>
            <SingleDatePicker
              date={stateDate}
              onDateChange={handleDateChange}
              focused={isShown}
              onFocusChange={onFocusChange}
              setStatusText={setStatusText}
            />
          </Popout.Content>
        }
      >
        <Button appearance="secondary" onClick={() => setIsShown(true)} aria-label="Click to open Date Picker">
          <Icon name="calendar-outline" mr={200} aria-hidden />
          { stateDate.format("DD MMM YYYY") }
        </Button>
      </Popout>
    </Box>
  );
}

Live Editor

function SingleDatePickerInlineExample() {
  const [stateDate, setDate] = React.useState(moment());

  const handleDateChange = (date) => {
    setDate(date);
  };

  const setStatusText = visibleMonths => "Now showing: " + visibleMonths.map(moment => moment.format("MMMM YYYY")).join(' and ');

  return (
    <Box display="flex" justifyContent="center">
      <SingleDatePicker
        date={stateDate}
        onDateChange={handleDateChange}
        setStatusText={setStatusText}
      />
    </Box>
  );
}

Date range selection

• If the user selects a start date that is past the end date, it will become the new start date and the end date will be removed
• If the user selects a start date that is before or on the end date, it will also become the new start date and the end date will remain
• If the user selects an end date that is before the start date, it will become the new start date and the end date will be removed
• The user may also select the same start and end date for single-date selection
• If selections match a date or date range preset, calendar should update to preset value
• After selecting a start date via the calendar, move to the respective end date
• After selecting an end date via the calendar, the date picker will close or focus on the next task

Live Editor

function DateRangePickerWithPopoutExample() {
  const START_DATE = "startDate";
  const [dates, setDate] = React.useState({ startDate: null, endDate: null });
  const [focusedInput, setFocusedInput] = React.useState(null);
  const [isShown, setIsShown] = React.useState(false);

  const onFocusChange = (nextFocusedInput) => {
    setFocusedInput(nextFocusedInput);
    setIsShown(nextFocusedInput !== null);
  };

  const setStatusText = visibleMonths => "Now showing: " + visibleMonths.map(moment => moment.format("MMMM YYYY")).join(' and ');

  return (
    <Box display="flex" justifyContent="center">
      <Popout
        isOpen={isShown}
        setIsOpen={setIsShown}
        content={
          <Popout.Content p={0} pt={400}>
            <DateRangePicker
              {...dates}
              onDatesChange={setDate}
              focusedInput={focusedInput}
              onFocusChange={onFocusChange}
              setStatusText={setStatusText}
            />
          </Popout.Content>
        }
      >
        <Button appearance="secondary" onClick={() => {setFocusedInput(START_DATE); setIsShown(true);}} aria-label="Click to open Date Picker">
          <Icon name="calendar-outline" mr={200} aria-hidden />
          { dates.startDate && dates.endDate ? `${dates.startDate.format("DD MMM YYYY")} - ${dates.endDate.format("DD MMM YYYY")}` : "Choose dates" }
        </Button>
      </Popout>
    </Box>
  );
}

Live Editor

function DateRangePickerInlineExample() {
  const START_DATE = "startDate";
  const [dates, setDate] = React.useState({
    startDate: moment(),
    endDate: moment().clone().add(3, "days")
  });
  const [focusedInput, setFocusedInput] = React.useState(START_DATE);

  const handleDatesChange = (nextDates) => {
    setDate(nextDates);
  };

  const handleFocusChange = (nextFocusedInput) => {
    setFocusedInput(
      nextFocusedInput === null ? START_DATE : nextFocusedInput
    );
  };

  const setStatusText = visibleMonths => "Now showing: " + visibleMonths.map(moment => moment.format("MMMM YYYY")).join(' and ');

  return (
    <Box display="flex" justifyContent="center">
      <DateRangePicker
        startDate={dates.startDate}
        endDate={dates.endDate}
        onDatesChange={handleDatesChange}
        focusedInput={focusedInput}
        onFocusChange={handleFocusChange}
        setStatusText={setStatusText}
      />
    </Box>
  );
}

Comparison periods

info

Comparison periods are not yet included as part of the Racine Date Picker.

• Popout remains open until dismissed by user.
• Comparison time periods match the current time period by default.
• Neutral decorative colors are used as the background and border colors for the comparison period.

Preset comparison date range

After selecting a date range end date, the date picker will remain open until dismissed by the user.

Custom comparison date range

By selecting "custom" the user now manually selects the time period. After selecting a date range end date, the selection shifts to the comparison period. After selecting a comparison date range end date, the date picker will remain open until closed manually to allow the user to validate input and make any changes before applying their selections. Focus is returned to the original time period.

Content indicators

info

Indicator display is not yet included as part of the Racine Date Picker.

Content indicators can be used to show that content exists on a calendar day.

Disabled states

Disabled states should follow form element and button rules around disabled styles.

Quick links and presets

Date range and comparison date range experiences feature quick links for easy date range selection.

Selecting a quick link (e.g., Last Month, Last 28 days or Last Week) will automatically update the associated text inputs and date range.

• Preset selections can be overridden by manual date selection
• Analytics has a specific order for presets:
  • Custom
  • Last 7 days
  • Last Week
  • Last 28 days
  • Last Month
• Order presets and quick links by the most recent date in the set e.g., "Custom, Last 7 Days, Last Week, Last 28 Days, Last Month"

Accessibility

• Always pass a setStatusText prop so that screen reader users will hear a localized announcement of which month(s) are visible on screen.
• When a date picker is rendered in a Popout, verify that the Popout can be closed with the Escape key. If the Popout is controlled (i.e., you are passing an isOpen prop to Popout), you must pass a setIsOpen prop in order for the Popout to close itself on Escape.

Resources

• Our Date Picker uses Airbnb's react-dates library as the base component
• Interaction patterns were inspired in part by Adphorus' React-date-range library