{
  "element": "nve-format-datetime",
  "entrypoint": "@nvidia-elements/core/format-datetime/format-datetime.examples.json",
  "items": [
    {
      "id": "format-datetime",
      "name": "Default",
      "template": "<nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n",
      "summary": "Basic date formatting with the long date style preset. Use for displaying human-readable dates in content areas, tables, or metadata.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-datetime-date-style",
      "name": "DateStyle",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"full\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"medium\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
      "summary": "Date style presets for controlling output density. Use full or long for detail-rich contexts and medium or short for compact layouts like data tables or cards.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-datetime-time-style",
      "name": "TimeStyle",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"long\" time-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"short\" time-style=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
      "summary": "Combined date and time style presets for full timestamps. Use for audit logs, event schedules, or activity feeds that need both date and time. Preset styles take precedence over granular formatting options when both appear.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-datetime-granular",
      "name": "Granular",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime weekday=\"long\" month=\"short\" day=\"numeric\" year=\"numeric\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime month=\"long\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
      "summary": "Granular date part options for precise formatting control. Use when presets don't match your layout, such as weekday and month only. Do not combine with date-style or time-style; style presets take priority if both appear.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-datetime-time-only",
      "name": "TimeOnly",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime hour=\"numeric\" minute=\"2-digit\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime hour=\"2-digit\" minute=\"2-digit\" second=\"2-digit\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
      "summary": "Time-only formatting with granular hour, minute, and second options. Use for clocks, time labels, or timestamps where the date is unnecessary.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-datetime-locale",
      "name": "Locale",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime locale=\"de-DE\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime locale=\"ja\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime locale=\"fr-FR\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
      "summary": "Explicit locale settings for internationalized date output. Use when the target audience locale differs from the browser default, such as multilingual dashboards or region-specific reports.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-datetime-date-attribute",
      "name": "DateAttribute",
      "template": "<nve-format-datetime date=\"2023-07-28T04:20:17.434Z\" date-style=\"long\"></nve-format-datetime>\n",
      "summary": "Date attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `date` wins when both are present.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-datetime-time-zone",
      "name": "TimeZone",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"America/New_York\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"Asia/Tokyo\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n</div>\n",
      "summary": "Time zone conversion for displaying dates in a specific region. Use for global teams, scheduling interfaces, or when UTC or server timestamps need a fixed time zone.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "format-datetime-time-zone-name",
      "name": "TimeZoneName",
      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime\n    locale=\"en-US\"\n    month=\"long\"\n    day=\"numeric\"\n    year=\"numeric\"\n    hour=\"numeric\"\n    minute=\"2-digit\"\n    time-zone=\"America/New_York\"\n    time-zone-name=\"short\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime\n    locale=\"en-US\"\n    month=\"long\"\n    day=\"numeric\"\n    year=\"numeric\"\n    hour=\"numeric\"\n    minute=\"2-digit\"\n    time-zone=\"America/New_York\"\n    time-zone-name=\"long\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n</div>\n",
      "summary": "Time zone name labels in short and long form alongside the formatted date. Use with granular options when the viewer needs to know which time zone applies, such as meeting schedulers or cross-region dashboards.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}