Yebbo Day Counter Pro | Forward & Backward Date Calculator<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <style>\n :root{\n --blue:#0F47AF;\n --green:#078930;\n --dark:#1b1f2a;\n --muted:#6b7280;\n --bg1:#f5f7fa;\n --bg2:#c3cfe2;\n --card:#ffffff;\n --line:#e5e7eb;\n --warn:#b91c1c;\n }\n *{box-sizing:border-box}\n body{\n margin:0;\n font-family: Arial, Helvetica, sans-serif;\n background: linear-gradient(135deg, var(--bg1), var(--bg2));\n padding:20px;\n color:var(--dark);\n }\n .wrap{\n max-width: 760px;\n margin: 0 auto;\n background: var(--card);\n border-radius: 14px;\n box-shadow: 0 12px 30px rgba(0,0,0,.15);\n overflow:hidden;\n }\n header{\n padding: 18px 18px 12px;\n border-bottom:1px solid var(--line);\n }\n h1{\n margin:0;\n color:var(--blue);\n font-size: 22px;\n text-align:center;\n }\n .sub{\n margin:6px 0 0;\n text-align:center;\n color:var(--muted);\n font-size: 13px;\n }\n .tabs{\n display:flex;\n gap:10px;\n padding: 14px 14px 0;\n flex-wrap:wrap;\n justify-content:center;\n }\n .tab{\n border:1px solid var(--line);\n padding:10px 12px;\n border-radius: 999px;\n cursor:pointer;\n background:#fff;\n font-weight:700;\n color:var(--dark);\n font-size: 14px;\n user-select:none;\n }\n .tab.active{\n border-color: var(--blue);\n box-shadow: 0 0 0 3px rgba(15,71,175,.12);\n color: var(--blue);\n }\n .panel{\n display:none;\n padding: 18px;\n }\n .panel.active{display:block;}\n .grid{\n display:grid;\n grid-template-columns: 1fr 1fr;\n gap:14px;\n }\n @media (max-width: 640px){\n .grid{grid-template-columns:1fr;}\n }\n label{\n display:block;\n font-weight:700;\n margin-bottom:6px;\n }\n input, select{\n width:100%;\n padding:10px 12px;\n border-radius: 10px;\n border:1px solid var(--line);\n font-size: 16px;\n outline:none;\n background:#fff;\n }\n input:focus, select:focus{\n border-color: var(--blue);\n box-shadow: 0 0 0 3px rgba(15,71,175,.12);\n }\n .row{\n margin-top: 12px;\n display:flex;\n gap:10px;\n flex-wrap:wrap;\n }\n button{\n padding: 11px 14px;\n border:none;\n border-radius: 10px;\n background: var(--green);\n color:#fff;\n font-weight:800;\n cursor:pointer;\n font-size: 15px;\n }\n button.secondary{\n background:#111827;\n }\n button.ghost{\n background:#fff;\n border:1px solid var(--line);\n color:#111827;\n }\n button:hover{filter:brightness(.97)}\n .result{\n margin-top: 14px;\n padding: 14px;\n border-radius: 12px;\n background: #f1f8ff;\n border-left: 5px solid var(--blue);\n line-height: 1.5;\n }\n .error{\n background:#fff1f2;\n border-left-color: var(--warn);\n color: #111827;\n }\n .small{\n color:var(--muted);\n font-size: 12px;\n margin-top:6px;\n }\n footer{\n padding: 12px 18px 16px;\n border-top:1px solid var(--line);\n text-align:center;\n color:var(--muted);\n font-size: 12px;\n }\n .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;}\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <header>\n <h1>Yebbo Day Counter Pro<\/h1>\n <div class=\"sub\">Forward \u2022 Backward \u2022 Date-to-Date (Travel \u2022 Visa \u2022 Projects \u2022 Events)<\/div>\n <\/header>\n\n <div class=\"tabs\">\n <div class=\"tab active\" data-tab=\"forward\">Forward (Start + Days \u2192 End)<\/div>\n <div class=\"tab\" data-tab=\"backward\">Backward (End + Days \u2192 Start)<\/div>\n <div class=\"tab\" data-tab=\"between\">Between (Start + End \u2192 Days)<\/div>\n <\/div>\n\n \n <section class=\"panel active\" id=\"forward\">\n <div class=\"grid\">\n <div>\n <label for=\"purposeF\">Purpose<\/label>\n <select id=\"purposeF\">\n <option>Travel<\/option>\n <option>Visa Stay<\/option>\n <option>Immigration Days<\/option>\n <option>Project Duration<\/option>\n <option>Event Planning<\/option>\n <option>Work Contract<\/option>\n <option>Other<\/option>\n <\/select>\n <\/div>\n\n <div>\n <label for=\"includeF\">Counting Style<\/label>\n <select id=\"includeF\">\n <option value=\"inclusive\" selected>Inclusive (counts start day as Day 1)<\/option>\n <option value=\"exclusive\">Exclusive (starts counting the next day)<\/option>\n <\/select>\n <div class=\"small\">Travel\/visa often uses inclusive counting. If unsure, keep inclusive.<\/div>\n <\/div>\n\n <div>\n <label for=\"startF\">Start Date<\/label>\n <input type=\"date\" id=\"startF\" \/>\n <\/div>\n\n <div>\n <label for=\"daysF\">Number of Days<\/label>\n <input type=\"number\" id=\"daysF\" min=\"1\" step=\"1\" placeholder=\"e.g., 7\" \/>\n <\/div>\n <\/div>\n\n <div class=\"row\">\n <button id=\"btnForward\">Calculate End Date<\/button>\n <button class=\"ghost\" id=\"btnForwardClear\">Clear<\/button>\n <\/div>\n\n <div id=\"resForward\" class=\"result\" style=\"display:none;\"><\/div>\n <\/section>\n\n \n <section class=\"panel\" id=\"backward\">\n <div class=\"grid\">\n <div>\n <label for=\"purposeB\">Purpose<\/label>\n <select id=\"purposeB\">\n <option>Travel<\/option>\n <option>Visa Stay<\/option>\n <option>Immigration Days<\/option>\n <option>Project Duration<\/option>\n <option>Event Planning<\/option>\n <option>Work Contract<\/option>\n <option>Other<\/option>\n <\/select>\n <\/div>\n\n <div>\n <label for=\"includeB\">Counting Style<\/label>\n <select id=\"includeB\">\n <option value=\"inclusive\" selected>Inclusive (counts end day as Day 1)<\/option>\n <option value=\"exclusive\">Exclusive (stops counting the day before)<\/option>\n <\/select>\n <div class=\"small\">If you want \u201c7 days ending on Jan 10\u201d, inclusive gives Jan 4 start.<\/div>\n <\/div>\n\n <div>\n <label for=\"endB\">End Date<\/label>\n <input type=\"date\" id=\"endB\" \/>\n <\/div>\n\n <div>\n <label for=\"daysB\">Number of Days<\/label>\n <input type=\"number\" id=\"daysB\" min=\"1\" step=\"1\" placeholder=\"e.g., 30\" \/>\n <\/div>\n <\/div>\n\n <div class=\"row\">\n <button id=\"btnBackward\">Calculate Start Date<\/button>\n <button class=\"ghost\" id=\"btnBackwardClear\">Clear<\/button>\n <\/div>\n\n <div id=\"resBackward\" class=\"result\" style=\"display:none;\"><\/div>\n <\/section>\n\n \n <section class=\"panel\" id=\"between\">\n <div class=\"grid\">\n <div>\n <label for=\"purposeD\">Purpose<\/label>\n <select id=\"purposeD\">\n <option>Travel<\/option>\n <option>Visa Stay<\/option>\n <option>Immigration Days<\/option>\n <option>Project Duration<\/option>\n <option>Event Planning<\/option>\n <option>Work Contract<\/option>\n <option>Other<\/option>\n <\/select>\n <\/div>\n\n <div>\n <label for=\"includeD\">Counting Style<\/label>\n <select id=\"includeD\">\n <option value=\"inclusive\" selected>Inclusive (counts both start and end)<\/option>\n <option value=\"exclusive\">Exclusive (difference only)<\/option>\n <\/select>\n <\/div>\n\n <div>\n <label for=\"startD\">Start Date<\/label>\n <input type=\"date\" id=\"startD\" \/>\n <\/div>\n\n <div>\n <label for=\"endD\">End Date<\/label>\n <input type=\"date\" id=\"endD\" \/>\n <\/div>\n <\/div>\n\n <div class=\"row\">\n <button id=\"btnBetween\">Count Days Between<\/button>\n <button class=\"ghost\" id=\"btnBetweenClear\">Clear<\/button>\n <\/div>\n\n <div id=\"resBetween\" class=\"result\" style=\"display:none;\"><\/div>\n <\/section>\n\n <footer>\n Powered by Yebbo.com \u2022 Yebbo Communication Network \u2022 Since 1999\n <\/footer>\n <\/div>\n\n<script>\n \/\/ ---------- Helpers ----------\n function parseDateFromInput(value){\n \/\/ Create a local date at midnight (avoid timezone shifting issues)\n if(!value) return null;\n const [y,m,d] = value.split(\"-\").map(Number);\n if(!y || !m || !d) return null;\n return new Date(y, m-1, d, 0, 0, 0, 0);\n }\n\n function formatDateHuman(dateObj){\n const opts = { year:'numeric', month:'long', day:'numeric' };\n return dateObj.toLocaleDateString(undefined, opts);\n }\n\n function addDays(dateObj, days){\n const d = new Date(dateObj.getTime());\n d.setDate(d.getDate() + days);\n return d;\n }\n\n function showResult(el, html, isError=false){\n el.style.display = \"block\";\n el.classList.toggle(\"error\", !!isError);\n el.innerHTML = html;\n }\n\n function clearResult(el){\n el.style.display = \"none\";\n el.classList.remove(\"error\");\n el.innerHTML = \"\";\n }\n\n function weeksAndDays(totalDays){\n const weeks = Math.floor(totalDays \/ 7);\n const rem = totalDays % 7;\n return { weeks, rem };\n }\n\n \/\/ ---------- Tabs ----------\n const tabs = document.querySelectorAll(\".tab\");\n const panels = document.querySelectorAll(\".panel\");\n tabs.forEach(t => {\n t.addEventListener(\"click\", () => {\n tabs.forEach(x => x.classList.remove(\"active\"));\n panels.forEach(p => p.classList.remove(\"active\"));\n t.classList.add(\"active\");\n document.getElementById(t.dataset.tab).classList.add(\"active\");\n });\n });\n\n \/\/ ---------- Forward (Start + Days -> End) ----------\n const resForward = document.getElementById(\"resForward\");\n document.getElementById(\"btnForward\").addEventListener(\"click\", () => {\n const purpose = document.getElementById(\"purposeF\").value;\n const mode = document.getElementById(\"includeF\").value; \/\/ inclusive\/exclusive\n const start = parseDateFromInput(document.getElementById(\"startF\").value);\n const days = Number(document.getElementById(\"daysF\").value);\n\n if(!start || !Number.isFinite(days) || days < 1){\n return showResult(resForward, \"<strong style='color:#b91c1c;'>Please enter a valid Start Date and Number of Days (minimum 1).<\/strong>\", true);\n }\n\n \/\/ If inclusive: Day 1 is start date, so end = start + (days - 1)\n \/\/ If exclusive: counting begins next day, so end = start + days\n const offset = (mode === \"inclusive\") ? (days - 1) : days;\n const end = addDays(start, offset);\n\n const wd = weeksAndDays(days);\n const explain = (mode === \"inclusive\")\n ? \"Inclusive counting: Start day is Day 1.\"\n : \"Exclusive counting: Counting starts the next day.\";\n\n showResult(resForward, `\n <div><strong>Purpose:<\/strong> ${purpose}<\/div>\n <div><strong>Start Date:<\/strong> <span class=\"mono\">${formatDateHuman(start)}<\/span><\/div>\n <div><strong>Days:<\/strong> ${days} (${wd.weeks} weeks, ${wd.rem} days)<\/div>\n <hr style=\"border:none;border-top:1px solid #dbeafe;margin:10px 0;\">\n <div><strong>End Date:<\/strong> <span class=\"mono\">${formatDateHuman(end)}<\/span><\/div>\n <div class=\"small\">${explain}<\/div>\n `);\n });\n\n document.getElementById(\"btnForwardClear\").addEventListener(\"click\", () => {\n document.getElementById(\"startF\").value = \"\";\n document.getElementById(\"daysF\").value = \"\";\n clearResult(resForward);\n });\n\n \/\/ ---------- Backward (End + Days -> Start) ----------\n const resBackward = document.getElementById(\"resBackward\");\n document.getElementById(\"btnBackward\").addEventListener(\"click\", () => {\n const purpose = document.getElementById(\"purposeB\").value;\n const mode = document.getElementById(\"includeB\").value;\n const end = parseDateFromInput(document.getElementById(\"endB\").value);\n const days = Number(document.getElementById(\"daysB\").value);\n\n if(!end || !Number.isFinite(days) || days < 1){\n return showResult(resBackward, \"<strong style='color:#b91c1c;'>Please enter a valid End Date and Number of Days (minimum 1).<\/strong>\", true);\n }\n\n \/\/ If inclusive: end day is Day 1, so start = end - (days - 1)\n \/\/ If exclusive: excludes end day, so start = end - days\n const offset = (mode === \"inclusive\") ? (days - 1) : days;\n const start = addDays(end, -offset);\n\n const wd = weeksAndDays(days);\n const explain = (mode === \"inclusive\")\n ? \"Inclusive counting: End day is Day 1.\"\n : \"Exclusive counting: Stops counting the day before the End Date.\";\n\n showResult(resBackward, `\n <div><strong>Purpose:<\/strong> ${purpose}<\/div>\n <div><strong>End Date:<\/strong> <span class=\"mono\">${formatDateHuman(end)}<\/span><\/div>\n <div><strong>Days:<\/strong> ${days} (${wd.weeks} weeks, ${wd.rem} days)<\/div>\n <hr style=\"border:none;border-top:1px solid #dbeafe;margin:10px 0;\">\n <div><strong>Start Date:<\/strong> <span class=\"mono\">${formatDateHuman(start)}<\/span><\/div>\n <div class=\"small\">${explain}<\/div>\n `);\n });\n\n document.getElementById(\"btnBackwardClear\").addEventListener(\"click\", () => {\n document.getElementById(\"endB\").value = \"\";\n document.getElementById(\"daysB\").value = \"\";\n clearResult(resBackward);\n });\n\n \/\/ ---------- Between (Start + End -> Days) ----------\n const resBetween = document.getElementById(\"resBetween\");\n document.getElementById(\"btnBetween\").addEventListener(\"click\", () => {\n const purpose = document.getElementById(\"purposeD\").value;\n const mode = document.getElementById(\"includeD\").value;\n const start = parseDateFromInput(document.getElementById(\"startD\").value);\n const end = parseDateFromInput(document.getElementById(\"endD\").value);\n\n if(!start || !end){\n return showResult(resBetween, \"<strong style='color:#b91c1c;'>Please select both Start Date and End Date.<\/strong>\", true);\n }\n\n const diffMs = end.getTime() - start.getTime();\n const diffDaysRaw = Math.floor(diffMs \/ (1000 * 60 * 60 * 24));\n if(diffDaysRaw < 0){\n return showResult(resBetween, \"<strong style='color:#b91c1c;'>End Date must be after Start Date.<\/strong>\", true);\n }\n\n const totalDays = (mode === \"inclusive\") ? (diffDaysRaw + 1) : diffDaysRaw;\n const wd = weeksAndDays(totalDays);\n\n const explain = (mode === \"inclusive\")\n ? \"Inclusive counting: counts both Start and End dates.\"\n : \"Exclusive counting: standard date difference only.\";\n\n showResult(resBetween, `\n <div><strong>Purpose:<\/strong> ${purpose}<\/div>\n <div><strong>Start Date:<\/strong> <span class=\"mono\">${formatDateHuman(start)}<\/span><\/div>\n <div><strong>End Date:<\/strong> <span class=\"mono\">${formatDateHuman(end)}<\/span><\/div>\n <hr style=\"border:none;border-top:1px solid #dbeafe;margin:10px 0;\">\n <div><strong>Total Days:<\/strong> ${totalDays} (${wd.weeks} weeks, ${wd.rem} days)<\/div>\n <div class=\"small\">${explain}<\/div>\n `);\n });\n\n document.getElementById(\"btnBetweenClear\").addEventListener(\"click\", () => {\n document.getElementById(\"startD\").value = \"\";\n document.getElementById(\"endD\").value = \"\";\n clearResult(resBetween);\n });\n\n \/\/ ---------- Quality-of-life: set today's date defaults (optional) ----------\n \/\/ Uncomment if you want auto-fill today in fields:\n \/\/ const today = new Date();\n \/\/ const yyyy = today.getFullYear();\n \/\/ const mm = String(today.getMonth()+1).padStart(2,'0');\n \/\/ const dd = String(today.getDate()).padStart(2,'0');\n \/\/ const iso = `${yyyy}-${mm}-${dd}`;\n \/\/ document.getElementById(\"startF\").value = iso;\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Yebbo Day Counter Pro | Forward & Backward Date Calculator Yebbo Day Counter Pro Forward \u2022 Backward \u2022 Date-to-Date (Travel […]<\/p>\n","protected":false},"author":1,"featured_media":534,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[18,24,32,13,30,25,28],"tags":[],"class_list":["post-530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business","category-ethiopia","category-techinology","category-travel","category-yebbotax","category-yebbotravel","category-28"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/yebbo.com\/ethiodiego\/wp-content\/uploads\/2026\/01\/YebboDaycounter-1.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8nzgb-8y","jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/comments?post=530"}],"version-history":[{"count":2,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/530\/revisions"}],"predecessor-version":[{"id":533,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/posts\/530\/revisions\/533"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media\/534"}],"wp:attachment":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media?parent=530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/categories?post=530"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/tags?post=530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":530,"date":"2026-01-11T03:51:18","date_gmt":"2026-01-11T03:51:18","guid":{"rendered":"https:\/\/yebbo.com\/ethiodiego\/?p=530"},"modified":"2026-01-11T03:58:26","modified_gmt":"2026-01-11T03:58:26","slug":"yebbo-day-counter-pro-forward-backward-date-calculator","status":"publish","type":"post","link":"http:\/\/yebbo.com\/ethiodiego\/yebbo-day-counter-pro-forward-backward-date-calculator\/","title":{"rendered":"Yebbo Day Counter Pro | Forward & Backward Date Calculator"},"content":{"rendered":"\n