@digital-blueprint/lunchlottery-app/vendor/toolkit/packages/form-elements/src/views/datetime.js

[GitHub Repository](https://github.com/digital-blueprint/lunchlottery-app) | [npmjs package](https://www.npmjs.com/package/@digital-blueprint/lunchlottery-app) | [Unpkg CDN](https://unpkg.com/browse/@digital-blueprint/lunchlottery-app/)

import {css, html} from 'lit';
import {ScopedElementsMixin} from '@dbp-toolkit/common';
import {DbpBaseView} from '../base-view.js';

export class DbpDateTimeView extends ScopedElementsMixin(DbpBaseView) {
    constructor() {
        super();
        this.label = 'A datetime field';
    }

    static get styles() {
        return [
            ...super.styles,
            // language=css
            css`
                :host([layout-type='inline']) fieldset {
                    display: flex;
                    gap: var(--dbp-enum-label-gap, 1em);
                    margin: 0;
                }
            `,
        ];
    }

    renderValue() {
        let date = this.value;

        // If date is a non-empty string, parse it to a Date object
        if (typeof date === 'string' && date !== '') {
            date = new Date(date);
        }

        // Format the date using toLocaleString with de-DE locale
        const dateTimeString =
            !date || date === ''
                ? '-'
                : date.toLocaleString('de-DE', {
                      year: 'numeric',
                      month: '2-digit',
                      day: '2-digit',
                      hour: '2-digit',
                      minute: '2-digit',
                      second: '2-digit',
                      timeZoneName: 'short',
                      hour12: false,
                  });

        return html`
            ${dateTimeString}
        `;
    }
}