{"id":26352,"date":"1970-01-01T00:00:00","date_gmt":"1969-12-31T23:00:00","guid":{"rendered":"https:\/\/zmi.de\/lexikon\/time-calculator\/"},"modified":"2026-06-30T10:55:54","modified_gmt":"2026-06-30T08:55:54","slug":"time-calculator","status":"publish","type":"lexikon","link":"https:\/\/zmi.de\/en\/lexikon\/time-calculator\/","title":{"rendered":"Time calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"26352\" class=\"elementor elementor-26352 elementor-21066\" data-elementor-post-type=\"lexikon\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f48bd47 e-flex e-con-boxed e-con e-parent\" data-id=\"7f48bd47\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6dcf66e6 elementor-widget elementor-widget-text-editor\" data-id=\"6dcf66e6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>What is a time calculator?<\/h2><p>A time calculator is a practical tool that can be used to add or subtract time data &#8211; for example when calculating working times, breaks or project durations. Unlike conventional arithmetic operations with decimal values, time is calculated on the basis of the 60 system, i.e. with hours and minutes. For example: 1 hour and 45 minutes plus 2 hours and 30 minutes equals 4 hours and 15 minutes &#8211; not 4.75 hours.  <\/p><h2>Areas of application of the time calculation<\/h2><p>Manual time addition and subtraction is often used when planning shifts, tracking project times or creating timetables. Precise time calculation also plays an important role in the creation of timetables, event schedules or care planning. Depending on the industry, special care is required &#8211; because an incorrect addition of just a few minutes can quickly add up over the course of a week.  <\/p><h2>Use time calculator<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d1b87b4 elementor-widget elementor-widget-html\" data-id=\"d1b87b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"time-calculator\" role=\"region\" aria-labelledby=\"addSubHeading\">\n  <h2 id=\"zeitrechnerHeading\" class=\"visually-hidden\">Time adder & subtractor<\/h2>\n\n  <form id=\"addSubForm\" novalidate=\"\">\n    <!-- first line ------------------------------------------------ -->\n    <div class=\"field-row\" style=\"margin-bottom:.75rem\">\n      <div class=\"field-group\">\n        <label for=\"operationSelect\">Calculation<\/label>\n        <select id=\"operationSelect\">\n          <option value=\"add\">Add<\/option>\n          <option value=\"subtract\">Subtract<\/option>\n          <option value=\"mixed\">Mixed<\/option>\n        <\/select> \n      <\/div>\n      <div class=\"field-group\">\n        <label for=\"firstTime\">Output time (HH:MM)<\/label>\n        <input type=\"text\" id=\"firstTime\" placeholder=\"z.&nbsp;B.&nbsp;10:00\" inputmode=\"numeric\" pattern=\"[0-9:]+\" autocomplete=\"off\">\n      <\/div>\n    <\/div>\n    <hr>\n    <!-- dynamic rows --------------------------------------------- -->\n    <div id=\"additionalTimesContainer\"><\/div>\n    <button type=\"button\" class=\"btn-link\" id=\"addTimeBtn\">+ add time<\/button>\n    \n    <hr>\n\n    <!-- calc button -->\n    <button type=\"submit\" class=\"btn-primary\" id=\"calcAddSubtractBtn\">Calculate<\/button>\n    \n    <!-- live region for errors -->\n    <p id=\"addSubMsg\" class=\"visually-hidden\" aria-live=\"assertive\"><\/p>\n\n    <!-- results -->\n    <div class=\"results\" id=\"addSubResults\" hidden=\"\">\n      <p><strong>Result:<\/strong>\n         <span id=\"resultTime\"><\/span>\n         <span id=\"resultWrapper\" hidden=\"\">(<span id=\"resultDecimal\"><\/span>)<\/span>\n      <\/p>\n    <\/div>\n  <\/form>\n<\/div>\n\n<style>\n\/********** UTIL **********\/\n.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}\n.wtc-error{color:#E30613;font-weight:700;}\n#addSubForm hr {border-top: 1px solid var(--e-global-color-a3eba1e);margin: 1rem 0;}\n\n\/********** Base theme **********\/\n.time-calculator{\n  background:var(--e-global-color-a843588);\n  color:var(--e-global-color-text);\n  border-radius:1rem;\n  padding:1.5rem;\n  font-family:var(--e-global-typography-text-font-family),sans-serif;\n  max-width:500px;\n}\n.field-row{display:flex;flex-wrap:nowrap;gap:1rem}\n@media(max-width:600px){.field-row{flex-direction:column}}\n.field-group{flex:1 1 0;display:flex;flex-direction:column}\n.field-group label{font-family:var(--e-global-typography-primary-font-family),sans-serif;font-weight:var(--e-global-typography-primary-font-weight);margin-bottom:.25rem}\n.field-group input, .field-group select{\n  padding:.5rem .75rem;border:1px solid var(--e-global-color-a3eba1e);\n  border-radius:.5rem;font-size:1rem;background:var(--e-global-color-28f8675);\n  color:var(--e-global-color-text);width:100%;box-sizing:border-box\n}\n.field-group input:focus, .field-group select:focus{\n  outline:2px solid var(--e-global-color-accent);outline-offset:2px}\n.btn-primary{background:var(--e-global-color-primary);color:#fff;border:none;\n  padding:.75rem 1.25rem;border-radius:999px;font-weight:var(--e-global-typography-primary-font-weight);\n  cursor:pointer;margin-top:.75rem;min-width:8rem}\n.btn-primary:hover{background:var(--e-global-color-24a8a9f)}\n.btn-primary:focus-visible{outline:2px solid var(--e-global-color-text);outline-offset:2px}\n.btn-link{background:none;border:none;padding:0;font:inherit;color:var(--e-global-color-accent);cursor:pointer}\n.btn-link:focus-visible{outline:2px solid var(--e-global-color-accent);outline-offset:2px}\nselect#operationSelect {\n    padding: 0;\n}\n#addTimeBtn {\n    width: 100%;\n    padding: 4px 16px;\n    font-size: 0.9rem;\n    background-color: var(--e-global-color-c3da063);\n    color: var(--e-global-color-28f8675);\n}\n\n#addTimeBtn:hover {\n    background-color: var(--e-global-color-ef2cd4b)\n}\n\nbutton.delAddSubBtn:hover {\n    color: #fff;\n}\n\n\/* dynamic row ---------------------------------------------------- *\/\n.addSubRow{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}\n.addSubRow input{flex:0 0 7rem;max-width:7rem}\n@media(max-width:480px){.addSubRow input{flex:1 1 5rem;max-width:100%}}\n\/* delete button (red X) *\/\n.delAddSubBtn{\n  --x:1.75rem;flex:0 0 var(--x);width:var(--x);height:var(--x);padding:0;\n  display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:#E30613\n}\n.delAddSubBtn:hover{color:var(--e-global-color-accent)}\n.delAddSubBtn:focus-visible{outline:2px solid var(--e-global-color-accent);outline-offset:2px}\n.delAddSubBtn.ghost{visibility:hidden}\n.results{margin-top:1.5rem}\n.results p{margin:.25rem 0}\n<\/style>\n\n<script>\n(() => {\n\/* ----------- helpers ------------------------------------------- *\/\nconst $ = sel => document.querySelector(sel);\nconst $$ = sel => document.querySelectorAll(sel);\nconst msg = $('#addSubMsg');\n\nconst parseTime = v => {\n  const [h,m=''] = v.split(':');\n  if(!h) return NaN;\n  const hr = parseInt(h,10);\n  const min = m.length===1 ? parseInt(m,10)*10 : parseInt(m,10);\n  return (isNaN(hr)||isNaN(min)) ? NaN : hr*60+min;\n};\nconst fmtMin = mins => {\n  const sign = mins<0 ? '-' : '';\n  const abs  = Math.abs(mins);\n  const h = Math.floor(abs\/60), m = abs%60;\n  return {\n    text:`${sign}${h}:${m.toString().padStart(2,'0')}`,\n    dec :(sign?'-':'')+ (abs\/60).toFixed(2).replace('.',',')\n  };\n};\nconst sanitize = (inp, re) => inp.value = inp.value.replace(re,'');\n\n\/* ----------- element refs -------------------------------------- *\/\nconst opSel   = $('#operationSelect');\nconst baseInp = $('#firstTime');\nconst addWrap = $('#additionalTimesContainer');\nconst addBtn  = $('#addTimeBtn');\nconst form    = $('#addSubForm');\nconst resBox  = $('#addSubResults');\nconst resTime = $('#resultTime');\nconst resDecW = $('#resultWrapper');\nconst resDec  = $('#resultDecimal');\n\n\/* ----------- input filters & auto-format ----------------------- *\/\nconst timeFilter = inp => sanitize(inp,\/[^0-9:]\/g);\nconst autoFmt = inp => {\n  let v = inp.value.trim();\n  if(!v) return;\n  if(!v.includes(':')) v += ':00';\n  const [h,m=''] = v.split(':');\n  let mm = m.length===1 ? parseInt(m,10)*10 : parseInt(m,10);\n  if(isNaN(mm)) mm = 0; if(mm>59) mm = 59;\n  inp.value = `${h}:${mm.toString().padStart(2,'0')}`;\n};\n\n\/* ----------- dynamic row builder ------------------------------- *\/\nfunction makeRow(){\n  const row = document.createElement('div'); row.className='addSubRow';\n  row.innerHTML = `\n    <input type=\"text\" class=\"addSubVal\" placeholder=\"HH:MM\" inputmode=\"numeric\" pattern=\"[0-9:]+\" autocomplete=\"off\">\n    <select class=\"rowOp\" ${opSel.value==='mixed'?'':'hidden'}>\n      <option value=\"add\">Addieren<\/option><option value=\"subtract\">Subtrahieren<\/option>\n    <\/select>\n    <button type=\"button\" class=\"delAddSubBtn\" aria-label=\"Zeile l\u00f6schen\">\n      X\n    <\/button>`;\n  const inp = row.querySelector('.addSubVal');\n  inp.addEventListener('input',() => timeFilter(inp));\n  inp.addEventListener('blur', () => autoFmt(inp));\n  row.querySelector('.delAddSubBtn').addEventListener('click', () => row.remove());\n  return row;\n}\n\n\/* ----------- events -------------------------------------------- *\/\nbaseInp.addEventListener('input', () => timeFilter(baseInp));\nbaseInp.addEventListener('blur',  () => autoFmt(baseInp));\n\naddBtn.addEventListener('click', () => {\n  const r = makeRow();\n  addWrap.appendChild(r); r.querySelector('.addSubVal').focus();\n});\n\nopSel.addEventListener('change', () => {\n  $$('.rowOp').forEach(sel=>{\n    if(opSel.value==='mixed'){ sel.hidden=false; }\n    else { sel.hidden=true; }\n  });\n});\n\n\/* ESC to clear current field (convenience) *\/\nform.addEventListener('keydown',e=>{\n  if(e.key==='Escape' && e.target.matches('input')){ e.target.value=''; }\n});\n\n\/* ----------- calculation --------------------------------------- *\/\nform.addEventListener('submit', e=>{\n  e.preventDefault();\n  autoFmt(baseInp);\n  const base = parseTime(baseInp.value);\n  if(isNaN(base)){\n    announce('Ung\u00fcltige Ausgangszeit', true); return;\n  }\n  let total = base;\n  addWrap.querySelectorAll('.addSubRow').forEach(row=>{\n    const val = row.querySelector('.addSubVal');\n    autoFmt(val);\n    const m = parseTime(val.value);\n    if(isNaN(m)) return;\n    const op = opSel.value==='mixed' ? row.querySelector('.rowOp').value : opSel.value;\n    total += (op==='add'? m : -m);\n  });\n  const out = fmtMin(total);\n  resTime.textContent = out.text;\n  resDec.textContent  = out.dec;\n  resDecW.hidden = false;\n  resBox.hidden = false;\n  announce('',false);\n});\n\n\/* ----------- live-region helper -------------------------------- *\/\nfunction announce(txt, isErr=false){\n  msg.textContent = txt;\n  msg.classList.toggle('wtc-error',isErr);\n}\n\/* add one initial row *\/\nmakeRow().querySelector('.addSubVal'); \/\/ builds template (not appended)\n\/* parentheses hidden until first calc *\/\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ddcae3a zmi-space-top-3 zmi-space-bottom-2 e-con-full e-flex e-con e-child\" data-id=\"ddcae3a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-904dcdd elementor-widget elementor-widget-heading\" data-id=\"904dcdd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">BMAS Draft Bill to Amend the Working Hours Act: <br \/><b>Working hours must be recorded electronically. <\/b> <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-199a449 elementor-widget elementor-widget-text-editor\" data-id=\"199a449\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>What does that mean, specifically?<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ed08aa elementor-align-center elementor-widget elementor-widget-button\" data-id=\"3ed08aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/zmi.de\/en\/time-recording-mandatory-ecj-ruling\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"Ebene_1\" data-name=\"Ebene 1\" width=\"26\" height=\"26\" viewBox=\"0 0 26 26\"><defs><style>      .cls-1 {        fill: #222727;      }    <\/style><\/defs><path class=\"cls-1\" d=\"m18.3,6.32H4.57s0-2.06,0-2.06h16.45c.59,0,.82.23.82.82v16.47h-2.05V7.79s-14.53,14.47-14.53,14.47l-1.42-1.42,14.47-14.52Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn more<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a045f8b elementor-widget elementor-widget-text-editor\" data-id=\"a045f8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>ZMI automates your time calculations<\/h2><p>With ZMI&#8217;s digital time recording solutions, manual calculation is no longer necessary. Start and end times, breaks and work interruptions are automatically calculated, documented and displayed in clear evaluations. Individual working time models, flexitime accounts or break regulations can be mapped flexibly. This saves your company time, avoids errors and at the same time meets all legal requirements for modern and transparent working time recording.   <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d753742 elementor-cta--skin-cover elementor-cta--valign-middle elementor-animated-content elementor-bg-transform elementor-bg-transform-zoom-in elementor-widget elementor-widget-call-to-action\" data-id=\"d753742\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"call-to-action.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-cta\">\n\t\t\t\t\t<div class=\"elementor-cta__bg-wrapper\">\n\t\t\t\t<div class=\"elementor-cta__bg elementor-bg\" style=\"background-image: url(https:\/\/zmi.de\/wp-content\/uploads\/2025\/04\/verlauf4-768x960.png);\" role=\"img\" aria-label=\"course4\"><\/div>\n\t\t\t\t<div class=\"elementor-cta__bg-overlay\"><\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-cta__content\">\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-cta__title elementor-cta__content-item elementor-content-item elementor-animated-item--grow\">\n\t\t\t\t\t\tDigital time tracking for small and medium-sized businesses starting at \u20ac1.16 per person per month\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-cta__description elementor-cta__content-item elementor-content-item elementor-animated-item--grow\">\n\t\t\t\t\t\tDigital time tracking with ZMI - People - cloud-based, simple, legally compliant.\t\t\t\t\t<\/span>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-cta__button-wrapper elementor-cta__content-item elementor-content-item elementor-animated-item--grow\">\n\t\t\t\t\t<a class=\"elementor-cta__button elementor-button elementor-size-\" href=\"https:\/\/zmi.de\/en\/time-tracking-cloud\/\">\n\t\t\t\t\t\tDiscover now\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-26352","lexikon","type-lexikon","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/zmi.de\/en\/wp-json\/wp\/v2\/lexikon\/26352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zmi.de\/en\/wp-json\/wp\/v2\/lexikon"}],"about":[{"href":"https:\/\/zmi.de\/en\/wp-json\/wp\/v2\/types\/lexikon"}],"version-history":[{"count":2,"href":"https:\/\/zmi.de\/en\/wp-json\/wp\/v2\/lexikon\/26352\/revisions"}],"predecessor-version":[{"id":30215,"href":"https:\/\/zmi.de\/en\/wp-json\/wp\/v2\/lexikon\/26352\/revisions\/30215"}],"wp:attachment":[{"href":"https:\/\/zmi.de\/en\/wp-json\/wp\/v2\/media?parent=26352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}