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