https://gotheos.com/assets-prod/controllers/local-datetime-controller-XRSqHQR.js

1import { Controller } from '@hotwired/stimulus'
2
3/* stimulusFetch: 'lazy' */
4export default class extends Controller {
5    static values = {
6        utc: String, // Expects ISO 8601 string (e.g., 2026-07-20T12:00:00Z)
7        display: { // datetime, date, time
8            type: String,
9            default: 'datetime',
10        },
11    }
12
13    connect() {
14        this.renderLocalDateTime()
15    }
16
17    renderLocalDateTime() {
18        if (!this.hasUtcValue) return
19
20        const date = new Date(this.utcValue)
21        let formatted = ''
22        switch (this.displayValue) {
23            case 'date':
24                formatted = this.getFormattedDate(date)
25                break;
26            case 'time':
27                formatted = this.getFormattedTime(date)
28                break;
29            default:
30                formatted = this.getFormattedDate(date) + ' ' + this.getFormattedTime(date)
31        }
32
33        this.element.textContent = formatted
34    }
35
36    getFormattedDate(date) {
37        return new Intl.DateTimeFormat('en-US', {
38            month: '2-digit',
39            day: '2-digit',
40            year: 'numeric',
41        }).format(date)
42    }
43
44    getFormattedTime(date) {
45        return new Intl.DateTimeFormat('en-US', {
46            hour: '2-digit',
47            minute: '2-digit',
48            hour12: true
49        }).format(date)
50    }
51}