Locale Preference Review Patterns

Date Preview

A static date-format preview shows 07/08/2026, July 8, 2026, Sunday week start, and Preview only status.

Program

Date previews should show exact example output and say when the values are not computed by a runtime formatter.

date_format_preview.html
Visuals: captured from real browser rendering
<section class="date-preview" aria-labelledby="date-preview-title">
  <h2 id="date-preview-title">Date format preview</h2>
  <dl>
    <div><dt>Short date</dt><dd>07/08/2026</dd></div>
    <div><dt>Long date</dt><dd>July 8, 2026</dd></div>
    <div><dt>Week starts</dt><dd>Sunday</dd></div>
    <div><dt>Status</dt><dd><span class="badge">Preview only</span></dd></div>
  </dl>
  <p class="note">Static date-format preview only; no Intl.DateTimeFormat, clock, timezone conversion, storage, route, API, network, script, or live setting change runs.</p>
</section>
<style>
  .date-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .date-preview dl { display: grid; gap: 8px; margin: 0; }
  .date-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .date-preview dt { color: #475569; }
  .date-preview dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the date preview.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show the short date.

    The short date is exact pinned data.
    The short date is exact pinned data.

  3. Show the long date.

    The long date is exact pinned data.
    The long date is exact pinned data.

  4. Show the week start.

    The week-start value is exact pinned data.
    The week-start value is exact pinned data.

  5. Render the preview status.

    The status makes clear this is a preview.
    The status makes clear this is a preview.

  6. Check date preview honesty.

    Short date, long date, week start, status, and no runtime formatter.
    Short date, long date, week start, status, and no runtime formatter.
preview readback The section heading names the date-format preview surface.
date rows Short date, Long date, Week starts, and Status values are exact pinned data.
no computed formatting The lesson should not imply Intl.DateTimeFormat, clocks, timezone conversion, storage, routes, APIs, scripts, or live setting changes.