# FormatDate

In Jobber a FormatDate is used to ensure that the date is displayed in the
expected format. No text styling is applied, this simply formats the date.

## Design & usage guidelines

### Getting a string version

Use `strFormatDate` if you need your formatted date as a string so it can be
passed as an attribute that doesn't allow for a component.

```ts
import { strFormatDate } from "@jobber/components/FormatDate";
```

```tsx
import React from "react";
import { Text } from "@jobber/components/Text";
import { strFormatDate } from "@jobber/components/FormatDate";

export function FormatDateStrExample() {
  return <Text>{strFormatDate(new Date())}</Text>;
}
```

## Design & usage guidelines

Use FormatDate to ensure that a date is represented as expected.

If there are additional text styling concerns, wrap FormatDate in a
[Text](../Text/Text.md) component.

If the formatted date is intended to be part of a heading, wrap FormatDate in a
[Heading](../Heading/Heading.md) component.

If you require a string instead of a component use strFormatDate.


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `date` | `string | Date` | Yes | — | Date to be formatted.  A `string` should be an ISO 8601 format date string. |
| `showYear` | `boolean` | No | `true` | Boolean to show year or not. |
