> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Date and Time

> Ensure clarity, consistency, and usability when displaying times and dates in the content.

## Best Practices

Explore best practices for displaying date and time across ServiceTitan.

### Use standard formats

Use standard, easily recognizable formats for dates and times.

* **Date (US):** Use MM/DD/YYYY format.
* **Time:** Use 12-hour format with am/pm (e.g., "3:00 pm")

Use full month names when clarity is critical or ambiguity is likely (e.g., in global contexts).

* Example: The appointment is on September 10, 2026, at 3:00 pm PST.

dateandtime-standard-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-standard-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>September 10, 2026</Text>
      <Text>09/10/2026</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

Use MM/DD/YYYY for US regions or clear full month names.

dateandtime-standard-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-standard-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Sep 10, 26</Text>
      <Text>9/10/26</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Avoid informal or inconsistent formats that may confuse users.

### Global Audiences

Consider using the 24-hour format for a global audience to avoid ambiguity. Default to UTC when:

* The user's time zone isn’t known.
* The action is system-level (logs, audit trails, global reporting).
* The user is part of a distributed or international team.

Use tenant time zone when:

* The user expects the time to be “local” (e.g., scheduling, invoicing, time tracking).
* The UI can clearly communicate the time zone (e.g., “PST,” “CST,” or “Tenant Time Zone: Pacific Time”).

dateandtime-global-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-global-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>The appointment is at 15:00 UTC.</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

Consider using the 24-hour format for a global audience to avoid ambiguity.

dateandtime-global-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-global-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>The event starts at 15:00 pm.</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Avoid mixing 12-hour and 24-hour formats incorrectly.

### Include Time Zones

dateandtime-timezone-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-timezone-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>The appointment is scheduled for 3:00 pm PST.</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

Specify time zones when times are relevant to users in different regions.

dateandtime-timezone-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-timezone-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>The meeting will be held at 3:00 pm.</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Avoid omitting time zones when the time is relevant to a geographically diverse audience.

### Be Consistent

dateandtime-consistent-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-consistent-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>
        The appointment is on September 10, 2026, at 3:00 pm PST. The deadline
        is on December 07, 2026, at 4:00 pm PST.
      </Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

Be consistent with formats throughout your content to avoid confusion.

dateandtime-consistent-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-consistent-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>
        The appointment is on September 10, 2026, at 3:00 pm. The deadline is
        12/07/2026 at 4pm.
      </Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Avoid switching between different date and time formats within the same content.

### Leading Zeros

When using UTC, use two digits for the hour and two digits for the minutes. When specifying a 12-hour time with a time-zone abbreviation, a leading zero is not required for a single-digit hour.

dateandtime-zeros-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-zeros-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>08:30 UTC</Text>
      <Text>8:30 am PST</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

Use a leading zero for single-digit UTC hours. You may omit it for 12-hour times that include a time-zone abbreviation.

dateandtime-zeros-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-zeros-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>8:30 UTC</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Avoid omitting the leading zero from a UTC hour.

### Relative Time References

dateandtime-relative-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-relative-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>The update was released 2 hours ago.</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

Use relative time references where appropriate for user convenience.

dateandtime-relative-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-relative-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>The appointment is next Friday.</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Avoid vague or unclear time references.

### Avoid Ambiguity

dateandtime-abbreviation-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-abbreviation-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>September 10, 2026</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

Use full month names to avoid ambiguity.

dateandtime-abbreviation-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-abbreviation-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Sep 10, 2026</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Avoid using abbreviated month names if they can be misinterpreted. The exception is in [Toolbar Filters](https://anvil.servicetitan.com/docs/components/toolbar-filters/design), where additional context is provided by the date icon and the surrounding component.

### Date Ranges

dateandtime-range-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-range-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>September 10–13, 2026</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

Use en-dashes for date ranges and ensure clarity.

dateandtime-range-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/dateandtime-range-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>September 10-13, 2026</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Avoid using hyphens for date ranges.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.