Calendar Style Guide

Use the native date input when a full custom calendar is unnecessary. It inherits the Field 01 surface.

Friendly Name

Date 01 — Native Date Field

GUID

8a17b3e1-0501-4d24-9a71-000000000501Copy GUID

Use in

Community Filters, Evidence Exports, Simple Forms

.ta-field input[type=date] { min-height:44px; color-scheme:dark; }

The canonical custom month picker. Today has an outline; the selected day uses the theme color; adjacent-month dates are muted.

Friendly Name

Calendar 01 — Themed Popover

GUID

8a17b3e1-0502-4d24-9a71-000000000502Copy GUID

Use in

Evidence Center Date Filters and Future Advanced Date Selection

.ta-calendar { width:330px; padding:15px; border:1px solid #4a4d53; background:#151618; box-shadow:8px 10px 0 rgba(0,0,0,.34); }

The canonical date-time control. Hour, Minute, and AM/PM share the same 44px outer height; the compact Local Time title follows the light-gray Title Case rule.

Friendly Name

Date Time 01 — Calendar & Time Picker

GUID

8a17b3e1-0504-4d24-9a71-000000000504Copy GUID

Use in

Evidence Records, Scheduled Actions, Event Forms, and Any Precise Local Timestamp

.ta-datetime-picker__field select, .ta-datetime-picker__period { min-height:44px; } .ta-datetime-picker__time-heading .ta-control-title { margin:0; } .ta-control-title { color:#d7d9dd; font-size:14px; font-weight:400; } .ta-datetime-picker__period { height:var(--ta-control-md); align-items:stretch; padding:3px; overflow:hidden; } .ta-datetime-picker__period > button { height:auto; min-height:0; align-self:stretch; display:inline-flex; align-items:center; justify-content:center; } .ta-datetime-picker__period button[aria-pressed=true] { background:var(--theme-accent); color:#fff; }

Place From and To fields beside each other on wide screens and stack them on mobile. Never reverse their order.

Friendly Name

Date 02 — Range Pair

GUID

8a17b3e1-0503-4d24-9a71-000000000503Copy GUID

Use in

Evidence Filters, Exports, Report Ranges

.ta-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }