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>
  );
};

The calendar popover can be closed by pressing the Escape key. This will close the calendar popover if it is currently open, allowing users to quickly dismiss the calendar without needing to click outside of it.

To allow users to navigate through the form fields, the calendar popover will close when the Tab key is pressed. This prevents the focus from being "stuck" in the calendar popover and allows users to continue navigating through the form.

The calendar popover will automatically open when the input field is focused. This allows users to quickly access the calendar without needing to click on the calendar icon or button. For some cases where users may want to open the calendar without focusing on the input field, the openCalendarOnFocus prop can be set to false.

<Stack>
  <Stack direction="horizontal">
    <DatePicker
      openCalendarOnFocus={false} // This prop controls whether the calendar opens on focus
      name="appointment_date"
      id="appointment_date"
    />
    <TextInput placeholder="Enter date" />
  </Stack>
  <Stack direction="horizontal">
    <DatePicker
      openCalendarOnFocus={false}
      name="appointment_date"
      id="appointment_date"
    />
    <TextInput placeholder="Enter date" />
  </Stack>
</Stack>