import { DateRangePicker } from "@vitality-ds/components";

The DateRangePicker input element is a form field that provides users with a calendar-style interface to select a range of dates. This input type is commonly used for tasks such as filtering search results by date.

The DateRangePicker's value returns the selected date range as an array of strings in ISO 8601 format: ["yyyy-mm-dd", "yyyy-mm-dd"].

When interacting with either of the date inputs, an event object is returned. You can find more details about this event object in the DatePicker documentation.

Within the event object, each key/value you'll find an array that contains two elements. The first element represents the 'from' field, and the second element represents the 'to' field. These elements provide you with the selected date range for further processing or display.

Here's an example returned event object:

event = {
  isValid: [true, false],
  errorMessage: [null, "Invalid Date Provided"],
  textValue: ["10/05/2023", "10/15/2023"],
  value: ["2023-05-10", ""],
};

Building a form? Checkout our FormField here

() => {
  const [dateRange, setDateRange] = React.useState([]);

  const changeHandler = (event) => {
    setDateRange(event.value);
  };

  return (
    <Stack>
      <DateRangePicker
        value={dateRange}
        name="filter_date_range"
        id="filter_date_range"
        onChange={changeHandler}
      />
    </Stack>
  );
};

Just like the DatePicker you can limit the range available for selection (with the DatePicker navigation tools). The props minYear and maxYear. The DateRangePicker's drop-down menus and navigation buttons have restricted options based on the defined props, preventing selection of dates outside the specified range. By default, the date picker allows for choosing dates within a range of 5 years before and after the current year.

It's important to keep in mind that these props only limit the available options in the navigation tools, and manual entry of dates outside the range is still possible. Additional validation is required to ensure that any manually entered date falls within the desired range.

() => {
  const [dateRange, setDateRange] = React.useState([]);

  const changeHandler = (event) => {
    setDateRange(event.value);
  };

  return (
    <Stack>
      <DateRangePicker
        value={dateRange}
        minYear={2023}
        maxYear={2030}
        name="filter_date_range"
        id="filter_date_range"
        onChange={changeHandler}
      />
    </Stack>
  );
};

The DateRangePicker should be used as a controlled component to work correctly. It requires passing the selected date range value through a value prop in order for the calendar to update correctly when a date range is selected.

The value of the DateRangePicker is always an array of two strings in the format ["yyyy-mm-dd", "yyyy-mm-dd"].

• If no first date is selected then the first item in the list will be an empty string: ["", "yyyy-mm-dd"].
• If the second DatePicker has no value the value of the DateRangePicker will be ["yyyy-mm-dd", ""].
• If both are empty: ["", ""].

() => {
  const [dateRange, setDateRange] = React.useState([]);

  const changeHandler = (event) => {
    setDateRange(event.value);
  };

  return (
    <Stack>
      <DateRangePicker
        value={dateRange}
        name="filter_date_range"
        id="filter_date_range"
        onChange={changeHandler}
      />
    </Stack>
  );
};

With the props fromLabel and toLabel allow you to change the labels on both of the DatePickers. fromLabel changes the first label, defaulting to "From". tolabel changes the second label, defaulting to "To".

() => {
  const [dateRange, setDateRange] = React.useState([]);

  const changeHandler = (event) => {
    setDateRange(event.value);
  };

  return (
    <Stack>
      <DateRangePicker
        value={dateRange}
        fromLabel="I've changed the first label"
        toLabel="I've changed the second label"
        name="filter_date_range"
        id="filter_date_range"
        onChange={changeHandler}
      />
    </Stack>
  );
};

By passing the hasError prop to the DateRangePicker component error styling will apply.

() => {
  const [dateRange, setDateRange] = React.useState("");

  const changeHandler = (event) => {
    setDateRange(event.value);
  };

  return (
    <Stack>
      <DateRangePicker
        hasError
        value={dateRange}
        name="filter_date_range"
        id="filter_date_range"
        onChange={changeHandler}
      />
    </Stack>
  );
};

By passing the disabled prop to the DateRangePicker component all related sub components will be non-interactive and disabled styling will apply.

() => {
  const [dateRange, setDateRange] = React.useState("");

  const changeHandler = (event) => {
    setDateRange(event.value);
  };

  return (
    <Stack>
      <DateRangePicker
        disabled
        value={dateRange}
        name="filter_date_range"
        id="filter_date_range"
        onChange={changeHandler}
      />
    </Stack>
  );
};

Preset date ranges" in a date range picker can provide users with quick access to commonly used date ranges, such as "This week" or "Last month" allowing them to save time and effort in selecting dates. This feature can also ensure consistency in date range selection across different parts of the application, enhancing the user experience and reducing user confusion.

1. Today
2. Tomorrow
3. This week
4. Last week
5. This month
6. Last month
7. This quarter
8. Last quarter
9. Last 12 months
10. Last 24 months
11. This financial year
12. Last financial year

If you find that the preset dropdown button is unnecessary or taking up valuable space, or if the filters are not serving any useful purpose, you may want to consider removing it using the showPresets prop. This prop controls whether the preset dropdown button is displayed, and its default value is true. However, setting it to false will remove the button.

() => {
  const [dateRange, setDateRange] = React.useState("");

  const changeHandler = (event) => {
    setDateRange(event.value);
  };

  return (
    <Stack>
      <DateRangePicker
        showPresets={false}
        value={dateRange}
        name="filter_date_range"
        id="filter_date_range"
        onChange={changeHandler}
      />
    </Stack>
  );
};

If you want to provide the default value of the date range picker to be one of the presets rather then empty you can pass a defaultValueFromPreset prop. The valid strings for this prop are snake_case versions of their labels.

1. Today -> today
2. Tomorrow -> tomorrow
3. This week -> this_week
4. Last week -> last_week
5. This month -> this_month
6. Last month -> last_month
7. This quarter -> this_quarter
8. Last quarter -> last_quarter
9. Last 12 months -> last_12_months
10. Last 24 months -> last_24_months
11. This financial year -> this_financial_year
12. Last financial year -> last_financial_year

() => {
  const [dateRange, setDateRange] = React.useState("");

  const changeHandler = (event) => {
    setDateRange(event.value);
  };

  return (
    <Stack>
      <DateRangePicker
        value={dateRange}
        name="filter_date_range"
        id="filter_date_range"
        onChange={changeHandler}
        defaultValueFromPreset="this_week"
      />
    </Stack>
  );
};