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

The DatePicker input element is a form field that allows users to select a specific date from a calendar-style interface. This input type is often used for fields such as appointment or procedure dates dates where a specific date must be selected. Vitality date pickers receive a value in ISO 8601 (yyyy-MM-dd) and returns an event object every time the input is interacted with.

The event object is structured as such:

• isValid: Returns the validity of the field as a boolean. Will be false if the date is either incomplete or not a real date. Will return true if the text field is empty or the value is a valid date and complete.
• errorMessage: If isValid: false then this prop will populate with either 'Invalid Date Provided' or 'Incomplete Date Provided'. Will be null if isValid: true.
• textValue: The current value of the text field expressed in the format dd/MM/yyyy for user-facing display. This will include the text mask guide if an incomplete date is currently there. This should not be stored against the value of the field as it will cause errors.
• value: The current value of the field in ISO 8601 format (yyyy-MM-dd). Will be an empty string if the textValue cannot be converted. When managing state, this value should be provided as the value of the field.

Building a form? Checkout our FormField here

() => {
  const [date, setDate] = React.useState("");

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

  return (
    <DatePicker
      value={date}
      name="appointment_date"
      id="appointment_date"
      onChange={changeHandler}
    />
  );
};

The props minYear and maxYear allow for control over the range of years available for selection in the date picker's navigation tools. The select menus and navigation buttons will be limited to the range defined by these props, preventing users from selecting dates outside of this range. By default, the date picker allows for selection of any date within the range of 5 years before and after the current year.

It's important to note that while these props restrict the range of years available for selection through the navigation tools, they do not prevent users from manually entering a date outside of the defined range. External validation is necessary to ensure that any date entered manually falls within the desired range.

() => {
  const [date, setDate] = React.useState("");

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

  return (
    <Stack>
      <DatePicker
        value={date}
        minYear={2023}
        maxYear={2030}
        name="appointment_date"
        id="appointment_date"
        onChange={changeHandler}
      />
    </Stack>
  );
};

The DatePicker is intended to be used as a controlled component to function correctly. It is necessary to pass the selected date value via a value prop in order for the calendar to update properly when a date is selected. The value given should be in iso 8601 format.

() => {
  const [date, setDate] = React.useState("");

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

  return (
    <Stack>
      <DatePicker
        value={date}
        name="appointment_date"
        id="appointment_date"
        onChange={changeHandler}
      />
    </Stack>
  );
};

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

() => {
  const [date, setDate] = React.useState("");

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

  return (
    <Stack>
      <DatePicker
        value={date}
        hasError
        name="appointment_date"
        id="appointment_date"
        onChange={changeHandler}
      />
    </Stack>
  );
};

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

() => {
  const [date, setDate] = React.useState("");

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

  return (
    <Stack>
      <DatePicker
        value={date}
        disabled
        name="appointment_date"
        id="appointment_date"
        onChange={changeHandler}
      />
    </Stack>
  );
};