# Input Date

InputDate provides a multi-modal way for the user to select a date, using
either:

* Form Field
* Visual calendar selector and comes complete with the ability to re-format user
  input into an expected date format.

## Design & usage guidelines

The InputDate should be used in most cases where the user needs to select a
date.

### States

#### Disabled

```tsx
import React from "react";
import { InputDate } from "@jobber/components/InputDate";
// eslint-disable-next-line import/no-deprecated
import type { InputDateProps } from "../InputDate.types";

// eslint-disable-next-line import/no-deprecated
export function InputDateDisabledExample(props: InputDateProps) {
  return <InputDate placeholder="Start Date" disabled={true} {...props} />;
}
```

#### Invalid

```tsx
import React from "react";
import type { InputDateProps } from "@jobber/components/InputDate";
import { InputDate } from "@jobber/components/InputDate";

export function InputDateInvalidExample(props: InputDateProps) {
  return (
    <InputDate
      placeholder="Start date"
      error="Start Date is required"
      invalid={true}
      {...props}
      version={2}
    />
  );
}
```

## Content guidelines

The InputDate should only be used to display and submit date values. For other
input usage, see [Related Components](#component-view-related-components).

## Responsiveness

When the InputDate is near the top or bottom of the viewport, the Datepicker
will adjust its position to remain in view.

The FormField for InputDate will take up the full available width of its parent.
If used in an [InputGroup](../InputGroup/InputGroup.md), it will take up the
available amount of space left by any other inputs in the group.

## Related components

* On web if you do not need an accompanying form field, you can use the
  [DatePicker](../Datepicker/Datepicker.md) on its own
* If you need to allow the user to enter time, use
  [InputTime](../InputTime/InputTime.md)
* If you just need a text input, use [InputText](../InputText/InputText.md)

## Accessibility

Accessibility concerns for the InputDate are captured by:

### FormField

Provides a label, announces input type, can be focused, and handles error
validation and messaging.

### Datepicker

[Datepicker](../Datepicker/Datepicker.md) is keyboard-operable and announces the
currently-focused date available for selection to the user via assistive
technology.


## Developer notes

Some functionality that we have opted not to introduce at this time, but that
would be relatively feasible to add in the future:

* allow for the concept of a date-range selection
* allow for certain days or dates to be excluded from selection

### Web

InputDate pairs with the

AtlantisContext

using the provided `firstDayOfWeek` value to determine what day the calendar date
picking UI will use to start weeks.

To leverage this behavior, implement the

AtlantisContext

at the root of the application, populated with the applicable value.


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `onChange` | `(newValue: Date) => void` | Yes | — | onChange handler that provides the new value (or event) |
| `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
| `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
| `disabled` | `boolean` | No | — | Disable the input |
| `emptyValueLabel` | `string` | No | — | Text to display instead of a date value |
| `id` | `string` | No | — | A unique identifier for the input. |
| `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
| `inputRef` | `RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>` | No | — |  |
| `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
| `maxDate` | `Date` | No | — | The maximum selectable date. |
| `minDate` | `Date` | No | — | The minimum selectable date. |
| `name` | `string` | No | — | Name of the input. |
| `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | A callback to handle "Enter" keypress. This will only run if Enter is the only key. Will not run if Shift or Control ... |
| `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
| `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
| `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
| `readonly` | `boolean` | No | — | Prevents users from editing the value. |
| `showIcon` | `boolean` | No | `true` | Whether to show the calendar icon |
| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
| `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
| `value` | `Date` | No | — | A Date object value (e.g., `new Date("11/11/2011")`) |
| `version` | `1` | No | — | Experimental: Determine which version of the FormField to use. Right now this isn't used but it will be used in the f... |
