Clock
Mit dem Clock-Modul bindest du eine sekundengenaue Live-Anzeige der aktuellen Zeit in deine Oberfläche ein – ideal für Dashboards, Formulare oder Statusleisten. Die Anzeige kann wahlweise nur die Uhrzeit oder zusätzlich das aktuelle Datum umfassen. Das Zeitformat lässt sich über das internationale Format (Intl.DateTimeFormat) einfach an Sprache und Region anpassen.
Funktion und Aussehen
Das Clock-Modul zeigt die aktuelle Systemzeit in Echtzeit an und aktualisiert die Anzeige jede Sekunde. Der Inhalt wird als einzeiliger Text gerendert. Über den dateTimeFormat-Key steuerst du, wie Datum und Zeit dargestellt werden: Formatiere die Anzeige präzise über die options des Intl.DateTimeFormat-Objekts (z. B. timeStyle: 'medium', dateStyle: 'short') und lege mit locale die Sprache bzw. den Sprachraum fest. So erhältst du automatisch das passende Trennzeichen, die gewünschte Reihenfolge von Tag, Monat und Jahr sowie 12- oder 24-Stunden-Format je nach Region.
Weitere Infos zum Intl.DateTimeFormat-Objekt findest du hier.
Für die Optik nutze den class-Key, um CSS-Klassen aus deinem globalen CSS-Code zu referenzieren, oder den style-Key für Inline-Styling.
Anzeige ohne Nutzer-Interaktion
Das Clock-Modul dient ausschließlich der Anzeige. Es bietet keine Actions oder Trigger; die Aktualisierung erfolgt automatisch im Sekundentakt. Für klickbare oder anderweitig angebundene Zeitangaben eignen sich andere Module wie das Input-Modul mit passendem Eingabetyp.
Modulcode
GIP_clock({
uniqueId: "myUniqueName" + Nr,
embedded: true,
})GIP_clock({
uniqueId: "myUniqueName" + Nr,
embedded: true,
style: "",
})GIP_clock({
uniqueId: "myUniqueName" + Nr,
embedded: true,
class: "",
style: "",
})GIP_clock({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
styleFn: "",
styleLabel: "",
styleComp: "",
presets: "",
},
class: "",
style: "",
dateTimeFormat: {
locale: "",
options: {
},
},
})html( raw(GIP_master({})) +
raw(GIP_clock({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
styleFn: "",
styleLabel: "",
styleComp: "",
presets: "",
},
class: "",
style: "",
dateTimeFormat: {
locale: "",
options: {
},
},
})
))Key-Table
|
|
|
|
|
|
|
|
|
|
|
|
|
|