Skip to main content

Date picker

Date picker in Storybook

Examples​

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

Basic example​

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

<DatePicker
  label="Choose date"
  onChange={(event, value) =>
    console.log('The date chosen is', value.day, value.month, value.year)
  }
/>

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 a dropdown. A user can manually enter any date.
<DatePicker
  label="Choose date"
  minDate={{ day: 1, month: 1, year: 2022 }}
  maxDate={{ day: 31, month: 12, year: 2023 }}
/>

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 2022.

function DatePickerMinMaxValidation() {
  const [validationMessages, setValidationMessages] = useState({});
  const minDate = { day: 1, month: 1, year: 2022 }
  const maxDate = { day: 31, month: 12, year: 2022 }

  function JutroDateToString (date) {
    return `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`
  }

  const parseErrorCode = (errorObject: {errorCode?:string}) => {
    if (!errorObject){
      return
    }

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

    if (errorCode === 'MIN_EXCEEDED') {
      return { error: [`Please enter a date after ${JutroDateToString(minDate)}.`] };
    }

    if (errorCode === 'MAX_EXCEEDED') {
      return { error: [`Please enter a date before ${JutroDateToString(maxDate)}.`] };
    }
  };

  const onChange = useCallback((e, newValue, errorObject) => {
    setValidationMessages({});
    const errorDetected = parseErrorCode(errorObject)

    if (errorDetected) {
      setValidationMessages(errorDetected);
    }
  }, []);

  return (
    <DatePicker
      label= "Choose date"
      onChange={onChange}
      minDate={minDate}
      maxDate={maxDate}
      stateMessages={validationMessages}
    />
  );
}