Formatted Date Time generator
Created/modified dates, due dates and scheduled times render through lightning-formatted-date-time with locale-aware formatting. Style label and value colors and choose a format that matches how precise the date actually needs to be.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<div class="studio-formatted-date-time">
<p class="studio-formatted-date-time__label">Created Date</p>
<lightning-formatted-date-time value={dateValue} weekday="long" year="numeric" month="long" day="2-digit" hour="2-digit" minute="2-digit" class="studio-formatted-date-time__value"></lightning-formatted-date-time>
</div>
</template>Design tips for formatted date times
- Use the full weekday+time format sparingly — for most record fields, a short date is easier to scan in a list of many rows.
- Keep timestamps in a lighter, secondary color than primary record data so they read as metadata, not as the main content.
- For anything time-zone sensitive, make sure the underlying value is a real ISO timestamp, not a display string, so the base component can localize it correctly.
Related components
Components developers commonly compare against or pair with Formatted Date Time.