Schneller Hack dazu (Admidio 5.0.14):
(1)
Datei themes/simple/templates/index.tpl (je nach Theme ggf. andere Datei)
Im <head> Bereich ergänzen:
Code: Alles auswählen
<script type="text/javascript">
/* date field day-of-week prefix handler */
var dayofweek_name_de = [
'Sonntag',
'Montag',
'Dienstag',
'Mittwoch',
'Donnerstag',
'Freitag',
'Samtags',
'Sonntag',
];
$(document).ready(function() {
$('.datetime-prefix-dayofweek input[type=date]').on('blur change', function() {
var parent = $(this).closest('.datetime-prefix-dayofweek');
if( ! parent) return;
const date = new Date($(this).val());
if( ! date) return;
const dayofweek = date.getDay();
if(isNaN(dayofweek)) return;
parent.css('--dayofweekname', '"' + dayofweek_name_de[dayofweek] + '"');
});
$('.datetime-prefix-dayofweek input[type=date]').trigger('change');
});
</script>
(2)
DateI themes/simple/css/admidio.css (je nach Theme ggf. andere Datei)
CSS ergänzen
Code: Alles auswählen
/* date field day-of-week prefix handler */
.datetime-prefix-dayofweek::before {
float:left;
display:inline-block;
margin-right: calc(var(--bs-gutter-x) * .5);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
background-clip: padding-box;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
content:var(--dayofweekname)
}
(3)
Datei themes/simple/css/templates/sys-template-parts/form.input.tpl
Original:
Code: Alles auswählen
...
{if $data.type == "datetime"}
{if $formType neq "vertical" and $formType neq "navbar"}<div class="row">{/if}
<div class="{if $formType neq "vertical" and $formType neq "navbar"}col-sm-3{else}col-auto{/if}">
...
Beim <div> die CSS-class um datetime-prefix-dayofweek ergänzen. col-sm-3 zu col-sm-4 ändern für mehr Platz (kann ggf. entfallen falls abgekürzte Tagesnamen reichen).
Anpassung:
Code: Alles auswählen
{if $data.type == "datetime"}
{if $formType neq "vertical" and $formType neq "navbar"}<div class="row">{/if}
<div class="datetime-prefix-dayofweek {if $formType neq "vertical" and $formType neq "navbar"}col-sm-4{else}col-auto{/if}">
Anmerkungen:
Das Input-Feld wird vom Browser/Betriebssystem gerendert, das Anzeigeformat kann nicht per HTML/CSS werden.
Aus gleichem Grund haben <input> Felder kein ::before/::after; wir benötigen also das umschließenden <div>. Streng genommen würde var parent = $(this).parent() reichen, dann entfällt die Anpassung in form.input.tpl. Macht aber vlcht. an anderem Ort mit anderen datetime inputs Probleme.
