;
}
};
## 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., "03:00 pm")
Use full month names when clarity is critical or ambiguity is likely (e.g., in global contexts).
* Example: The appointment is on July 12, 2025, at 3:00 pm PST.
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
July 12, 2025 or 07/12/2025
);
}
export default App;
```
**Do**
Use MM/DD/YYYY or clear full month names.
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
July 12, 2025 or 07/12/2025
);
}
export default App;
```
**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”).
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
The appointment is at 15:00 UTC.
);
}
export default App;
```
**Do**
Consider using the 24-hour format for a global audience to avoid ambiguity.
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
The event starts at 15:00 pm.
);
}
export default App;
```
**Don't**
Avoid mixing 12-hour and 24-hour formats incorrectly.
### Include Time Zones
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
The appointment is scheduled for 3:00 pm PST.
);
}
export default App;
```
**Do**
Specify time zones when times are relevant to users in different regions.
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
The meeting will be held at 3:00 pm.
);
}
export default App;
```
**Don't**
Avoid omitting time zones when the time is relevant to a geographically diverse audience.
### Be Consistent
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
The appointment is on July 12, 2025, at 3:00 pm PST. The deadline is on
December 07, 2025 at 4:00 pm PST.
);
}
export default App;
```
**Do**
Be consistent with formats throughout your content to avoid confusion.
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
The appointment is on July 12, 2025, at 3:00 pm. The deadline is
12/07/2025 at 4pm.
);
}
export default App;
```
**Don't**
Avoid switching between different date and time formats within the same content.
### Leading Zeros
When UTC format is used, all four digits should be used. When specifying a time zone, the leading zero is not required when the hour is not a double digit.
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
08:30 am UTC or 8:30 am PST
);
}
export default App;
```
**Do**
Use leading zeros for single-digit times for clarity.
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
08:30 am
);
}
export default App;
```
**Don't**
### Relative Time References
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
The update was released 2 hours ago.
);
}
export default App;
```
**Do**
Use relative time references where appropriate for user convenience.
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
The appointment is next Friday.
);
}
export default App;
```
**Don't**
Avoid vague or unclear time references.
### Avoid Ambiguity
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
July 12, 2025
);
}
export default App;
```
**Do**
Use full month names to avoid ambiguity.
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
Jul 12, 2025
);
}
export default App;
```
**Don't**
Avoid using abbreviated month names if they can be misinterpreted. The exception is in [Toolbar Filters](/docs/web/components/toolbar-filters/design), where additional context is provided by the date icon and the surrounding component.
### Date Ranges
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
July 12–15, 2025
);
}
export default App;
```
**Do**
Use en-dashes for date ranges and ensure clarity.
```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";
function App() {
return (
The event starts at 15:00 pm.
);
}
export default App;
```
**Don't**
Avoid mixing 12-hour and 24-hour formats incorrectly.
