https://www.eventeny.com/js/Components/DateElement.js?v=1790795785

1/**
2 * The DateElement class is a custom HTML element used to format and display a Unix timestamp.
3 * This component ensures consistent date formatting across the platform and displays the date 
4 * in the user's local timezone.
5 *
6 * @class DateElement
7 * @extends HTMLElement
8 *
9 * @example
10 * <date-display-element timestamp="1699996800"></date-display-element>
11 *
12 * @attribute {string} timestamp - The Unix timestamp to be converted and displayed in the local timezone.
13 *
14 * @method connectedCallback - Called when the element is added to the DOM.
15 * @method attributeChangedCallback - Called when an observed attribute has been added, removed, updated, or replaced.
16 * @method render - Handles the conversion of the Unix timestamp to a formatted date and updates the display.
17 */
18class DateElement extends HTMLElement {
19    constructor() {
20        super();
21        this.attachShadow({ mode: 'open' });
22
23        // Container for the date
24        this.dateContainer = document.createElement('div');
25        this.dateContainer.classList.add('date-display');
26        this.shadowRoot.appendChild(this.dateContainer);
27
28        // Add styles for the date display
29        const style = document.createElement('style');
30        style.textContent = `
31            .date-display {
32                font-family: 'Plus Jakarta Sans', sans-serif;
33                font-size: 14px;
34                color: #111;
35                font-weight: 500;
36            }
37        `;
38        this.shadowRoot.appendChild(style);
39    }
40
41    /**
42     * connectedCallback is called when the element is added to the DOM.
43     * It initializes the component rendering.
44     */
45    connectedCallback() {
46        this.render();
47    }
48
49    /**
50     * observedAttributes defines the list of attributes to observe for changes.
51     * @returns {Array<string>} - The list of observed attributes.
52     */
53    static get observedAttributes() {
54        return ['timestamp'];
55    }
56
57    /**
58     * attributeChangedCallback is called whenever one of the observed attributes changes.
59     * @param {string} name - The name of the attribute that changed.
60     * @param {string} oldValue - The old value of the attribute.
61     * @param {string} newValue - The new value of the attribute.
62     */
63    attributeChangedCallback(name, oldValue, newValue) {
64        if (name === 'timestamp' && oldValue !== newValue) {
65            this.render();
66        }
67    }
68
69    /**
70     * render converts the Unix timestamp to a formatted date string and updates the date container.
71     */
72    render() {
73        const timestamp = this.getAttribute('timestamp');
74        if (timestamp) {
75            // Convert Unix timestamp to a Date object
76            const date = new Date(parseInt(timestamp, 10) * 1000);
77            
78            // Format the date to a user-friendly string in local timezone
79            const formattedDate = date.toLocaleDateString(undefined, {
80                year: 'numeric',
81                month: 'short',
82                day: 'numeric'
83            });
84            
85            // Update the date container content
86            this.dateContainer.textContent = formattedDate;
87        } else {
88            this.dateContainer.textContent = '';
89        }
90    }
91}
92
93// Define the new element
94customElements.define('date-display-element', DateElement);