Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

DevTools Datetime: Felder-leeren statt Jetzt-verwenden, Wochentag beim Geburtstag, Dezimalstellen, Datum ohne Uhrzeit

Browse Source
This commit is contained in:
Dicken
2026-06-01 09:55:31 +02:00
parent 34a00dce8f
commit bc775f67d3
1 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/tools/devtools.jsx
View File

@@ -601,12 +601,14 @@ function DatetimeRechner({ mobile }) {
const nextBday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
if (nextBday <= today) nextBday.setFullYear(today.getFullYear()+1);
const diffMs = nextBday - today;
const diffD = Math.ceil(diffMs / 86400000);
const diffD = (diffMs / 86400000).toFixed(1);
const totalD = Math.floor((today - birth) / 86400000);
const nextWday = WEEKDAYS[nextBday.getDay()];
setBdayResult({ age, diffD, totalD, wday: WEEKDAYS[birth.getDay()],
setBdayResult({ age, diffD, totalD,
wday: WEEKDAYS[birth.getDay()],
geburtstag: `${pad2(birth.getDate())}.${pad2(birth.getMonth()+1)}.${birth.getFullYear()}`,
nextDate: `${pad2(nextBday.getDate())}.${pad2(nextBday.getMonth()+1)}.${nextBday.getFullYear()}`,
nextDate: `${pad2(nextBday.getDate())}.${pad2(nextBday.getMonth()+1)}.${nextBday.getFullYear()} (${nextWday})`,
});
}
@@ -620,12 +622,13 @@ function DatetimeRechner({ mobile }) {
const dA = new Date(a), dB = new Date(b);
if (isNaN(dA)||isNaN(dB)) { setDiffResult(null); return; }
const ms = Math.abs(dB - dA);
const s = Math.floor(ms/1000);
const m = Math.floor(s/60);
const h = Math.floor(m/60);
const d = Math.floor(h/24);
const weeks = Math.floor(d/7);
const months = Math.abs(dB.getMonth()-dA.getMonth() + (dB.getFullYear()-dA.getFullYear())*12);
const s = (ms / 1000).toFixed(1);
const m = (ms / 60000).toFixed(1);
const h = (ms / 3600000).toFixed(2);
const d = (ms / 86400000).toFixed(2);
const weeks = (ms / (86400000*7)).toFixed(2);
const dA2 = new Date(Math.min(dA,dB)), dB2 = new Date(Math.max(dA,dB));
const months = Math.abs(dB2.getMonth()-dA2.getMonth() + (dB2.getFullYear()-dA2.getFullYear())*12);
setDiffResult({ ms, s, m, h, d, weeks, months });
}
@@ -667,15 +670,9 @@ function DatetimeRechner({ mobile }) {
value={conv.local||''} onChange={e=>{ setConv(p=>({...p,local:e.target.value})); convFromLocal(e.target.value); }}/>
</div>
</div>
<button style={{...S.btn('#4ecdc4',false), fontSize:11, padding:'6px 14px', marginBottom:16}}
onClick={()=>{
const d = new Date();
const unixSec = Math.floor(d.getTime()/1000);
const mosesVal = unixMsToMoses(d.getTime());
setConv({unix:String(unixSec), moses:String(mosesVal), local:toLocalISO(d)});
convFromUnix(String(unixSec));
}}>
Jetzt verwenden
<button style={{...S.btn('#ff6b9d',false), fontSize:11, padding:'6px 14px', marginBottom:16}}
onClick={()=>{ setConv({unix:'',moses:'',local:''}); setConvResult(null); }}>
✕ Felder leeren
</button>
{convResult && (
<div>
@@ -704,11 +701,15 @@ function DatetimeRechner({ mobile }) {
{tab==='bday' && (
<div>
<div style={{marginBottom:16}}>
<div style={{display:'flex',alignItems:'flex-end',gap:10,marginBottom:16,flexWrap:'wrap'}}>
<div>
<div style={lbl}>Geburtsdatum</div>
<input style={{...inp, maxWidth:220}} type="date" value={bday}
onChange={e=>calcBday(e.target.value)}/>
</div>
{!!bday && <button style={{...S.btn('#ff6b9d',false), fontSize:11, padding:'6px 14px'}}
onClick={()=>{ setBday(''); setBdayResult(null); }}>✕ Leeren</button>}
</div>
{bdayResult && (
<div>
<DtRow label="Geburtsdatum" value={`${bdayResult.geburtstag} (${bdayResult.wday})`}/>
@@ -731,29 +732,31 @@ function DatetimeRechner({ mobile }) {
<div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1fr 1fr',gap:12,marginBottom:16}}>
<div>
<div style={lbl}>Von</div>
<input style={inp} type="datetime-local" value={dtA}
<input style={inp} type="date" value={dtA}
onChange={e=>{ setDtA(e.target.value); calcDiff(e.target.value, dtB); }}/>
</div>
<div>
<div style={lbl}>Bis</div>
<input style={inp} type="datetime-local" value={dtB}
<input style={inp} type="date" value={dtB}
onChange={e=>{ setDtB(e.target.value); calcDiff(dtA, e.target.value); }}/>
</div>
</div>
{!!(dtA||dtB) && <button style={{...S.btn('#ff6b9d',false), fontSize:11, padding:'6px 14px', marginBottom:16}}
onClick={()=>{ setDtA(''); setDtB(''); setDiffResult(null); }}>✕ Felder leeren</button>}
{diffResult && (
<div>
<DtRow label="Millisekunden" value={diffResult.ms.toLocaleString('de-DE')} muted/>
<DtRow label="Sekunden" value={diffResult.s.toLocaleString('de-DE')}/>
<DtRow label="Minuten" value={diffResult.m.toLocaleString('de-DE')}/>
<DtRow label="Stunden" value={diffResult.h.toLocaleString('de-DE')}/>
<DtRow label="Tage" value={diffResult.d.toLocaleString('de-DE')}/>
<DtRow label="Wochen" value={`~${diffResult.weeks}`} muted/>
<DtRow label="Monate" value={`~${diffResult.months}`} muted/>
<DtRow label="Millisekunden" value={Number(diffResult.ms).toLocaleString('de-DE')} muted/>
<DtRow label="Sekunden" value={Number(diffResult.s).toLocaleString('de-DE')}/>
<DtRow label="Minuten" value={Number(diffResult.m).toLocaleString('de-DE')}/>
<DtRow label="Stunden" value={Number(diffResult.h).toLocaleString('de-DE')}/>
<DtRow label="Tage" value={Number(diffResult.d).toLocaleString('de-DE')}/>
<DtRow label="Wochen" value={Number(diffResult.weeks).toLocaleString('de-DE')} muted/>
<DtRow label="Monate (ca.)" value={`~${diffResult.months}`} muted/>
</div>
)}
{!diffResult && (
<div style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:11}}>
Zwei Zeitpunkte eingeben
Zwei Datumswerte eingeben
</div>
)}
</div>