Skip to main content

Date range

Date range in Storybook

Examples​

Check out the Usage section for details about how to design a DateRangePicker properly, and the different configuration options we provide.

Basic Example​

You can add an input that allows a user to enter a date range either manually or through calendar modals.

<DateRangePicker
  label={{ start: 'Choose start date', end: 'Choose end date' }}
  onChange={(event, value) =>
    console.log('The dates chosen are', value.start, value.end)
  }
/>

Min/Max example​

You can limit the range of dates a user can select.

Note: This does not include validation, it only limits the options in the calendar modal. A user can type any date into the input.
<DateRangePicker
  label={{ start: 'Choose start date', end: 'Choose end date' }}
  minDate={{ day: 1, month: 1, year: 2024 }}
  maxDate={{ day: 31, month: 12, year: 2024 }}
/>

Validation Example​

You can use the onChange property to call a function that updates stateMessages to display errors to the user. The following example displays errors for invalid dates or dates that are not in 2024.

Note: As mentioned in the previous example, a user can type any date into the input regardless of the minDate and maxDate properties.
import React, { useState } from 'react';
import { DateRangePicker } from '@jutro/components/new';

export function DateRangePickerError() {
  const [stateMessages, setStateMessages] = useState({});

  const parseErrorCode = (sideErrorObject) => {
    let errorCode = sideErrorObject.errorCode;
    if (errorCode === 'INVALID_DATE') {
      return { error: ['Please enter a valid date.'] };
    }

    if (errorCode === 'MIN_EXCEEDED' || errorCode === 'MAX_EXCEEDED') {
      return { error: ['Please enter a valid date.'] };
    }
  };

  const handleChange = (event, value, errorObject) => {
    let parsedMessages: {
      start?: { error: string[] };
      end?: { error: string[] };
    } = {};
    // check start
    let start_error = errorObject?.start;
    if (start_error) {
      parsedMessages.start = parseErrorCode(start_error);
    }

    // check end
    let end_error = errorObject?.end;
    if (end_error) {
      parsedMessages.end = parseErrorCode(end_error);
    }
    console.log(parsedMessages);
    setStateMessages(parsedMessages);
  };

  return (
    <DateRangePicker
      label={{ start: 'Choose start date', end: 'Choose end date' }}
      minDate={{ day: 1, month: 1, year: 2024 }}
      maxDate={{ day: 31, month: 12, year: 2024 }}
      onChange={handleChange}
      stateMessages={stateMessages}
    />
  );
}