{"id":1615,"date":"2024-12-12T14:35:00","date_gmt":"2024-12-12T14:35:00","guid":{"rendered":"https:\/\/donhit.com\/en\/?p=1615"},"modified":"2025-02-07T09:43:41","modified_gmt":"2025-02-07T09:43:41","slug":"duration-between-two-dates","status":"publish","type":"post","link":"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/","title":{"rendered":"Duration Between Two Dates"},"content":{"rendered":"<p><center><div class=\"calculator\">\r\n        <h2>Date Duration Calculator<\/h2>\r\n        <div class=\"input-group\">\r\n            <input type=\"date\" id=\"startDate\" required>\r\n            <input type=\"date\" id=\"endDate\" required>\r\n        <\/div>\r\n        <button id=\"calculateBtn\">Calculate Duration<\/button>\r\n        <canvas id=\"resultCanvas\" width=\"450\" height=\"200\"><\/canvas>\r\n        <div id=\"resultText\"><\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const startDateInput = document.getElementById('startDate');\r\n        const endDateInput = document.getElementById('endDate');\r\n        const calculateBtn = document.getElementById('calculateBtn');\r\n        const resultCanvas = document.getElementById('resultCanvas');\r\n        const resultText = document.getElementById('resultText');\r\n        const ctx = resultCanvas.getContext('2d');\r\n\r\n        calculateBtn.addEventListener('click', calculateDateDuration);\r\n\r\n        function calculateDateDuration() {\r\n            const startDate = new Date(startDateInput.value);\r\n            const endDate = new Date(endDateInput.value);\r\n\r\n            if (startDate > endDate) {\r\n                alert('Start date must be before end date');\r\n                return;\r\n            }\r\n\r\n            const diffTime = Math.abs(endDate - startDate);\r\n            const diffDays = Math.ceil(diffTime \/ (1000 * 60 * 60 * 24));\r\n            const years = Math.floor(diffDays \/ 365);\r\n            const months = Math.floor((diffDays % 365) \/ 30);\r\n            const days = (diffDays % 365) % 30;\r\n\r\n            updateResultCanvas(years, months, days);\r\n            updateResultText(years, months, days);\r\n        }\r\n\r\n        function updateResultCanvas(years, months, days) {\r\n            ctx.clearRect(0, 0, resultCanvas.width, resultCanvas.height);\r\n            \r\n            \/\/ Background gradient\r\n            const gradient = ctx.createLinearGradient(0, 0, resultCanvas.width, 0);\r\n            gradient.addColorStop(0, '#4a90e2');\r\n            gradient.addColorStop(1, '#50c878');\r\n            ctx.fillStyle = gradient;\r\n            ctx.fillRect(0, 0, resultCanvas.width, resultCanvas.height);\r\n\r\n            \/\/ Text styling\r\n            ctx.font = 'bold 24px Arial';\r\n            ctx.textAlign = 'center';\r\n            ctx.fillStyle = 'white';\r\n\r\n            \/\/ Draw duration details\r\n            ctx.fillText(`Duration Breakdown`, resultCanvas.width \/ 2, 50);\r\n            ctx.font = '18px Arial';\r\n            ctx.fillText(`Years: ${years} | Months: ${months} | Days: ${days}`, resultCanvas.width \/ 2, 100);\r\n            \r\n            \/\/ Small decorative elements\r\n            ctx.beginPath();\r\n            ctx.arc(50, 50, 10, 0, Math.PI * 2);\r\n            ctx.arc(resultCanvas.width - 50, 50, 10, 0, Math.PI * 2);\r\n            ctx.fillStyle = 'rgba(255,255,255,0.5)';\r\n            ctx.fill();\r\n        }\r\n\r\n        function updateResultText(years, months, days) {\r\n            resultText.textContent = `Total Duration: ${years} years, ${months} months, and ${days} days`;\r\n        }\r\n\r\n        \/\/ Set max date to today\r\n        const today = new Date().toISOString().split('T')[0];\r\n        startDateInput.max = today;\r\n        endDateInput.max = today;\r\n    <\/script><\/center>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[185],"tags":[],"class_list":["post-1615","post","type-post","status-publish","format-standard","hentry","category-time-calculators"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Duration Between Two Dates - DonHit<\/title>\n<meta name=\"description\" content=\"Tools like date difference calculators simplify the process by automating calculations, accounting for factors such as leap years and variations in calendar systems like the Gregorian calendar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Duration Between Two Dates - DonHit\" \/>\n<meta property=\"og:description\" content=\"Tools like date difference calculators simplify the process by automating calculations, accounting for factors such as leap years and variations in calendar systems like the Gregorian calendar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/\" \/>\n<meta property=\"og:site_name\" content=\"DonHit - World of Tools\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-12T14:35:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-07T09:43:41+00:00\" \/>\n<meta name=\"author\" content=\"DonHit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DonHit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Duration Between Two Dates - DonHit","description":"Tools like date difference calculators simplify the process by automating calculations, accounting for factors such as leap years and variations in calendar systems like the Gregorian calendar.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/","og_locale":"en_US","og_type":"article","og_title":"Duration Between Two Dates - DonHit","og_description":"Tools like date difference calculators simplify the process by automating calculations, accounting for factors such as leap years and variations in calendar systems like the Gregorian calendar.","og_url":"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/","og_site_name":"DonHit - World of Tools","article_published_time":"2024-12-12T14:35:00+00:00","article_modified_time":"2025-02-07T09:43:41+00:00","author":"DonHit","twitter_card":"summary_large_image","twitter_misc":{"Written by":"DonHit","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/#article","isPartOf":{"@id":"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/"},"author":{"name":"DonHit","@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"headline":"Duration Between Two Dates","datePublished":"2024-12-12T14:35:00+00:00","dateModified":"2025-02-07T09:43:41+00:00","mainEntityOfPage":{"@id":"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/"},"wordCount":11,"commentCount":0,"publisher":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"articleSection":["Time Calculators"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/","url":"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/","name":"Duration Between Two Dates - DonHit","isPartOf":{"@id":"https:\/\/donhit.com\/en\/#website"},"datePublished":"2024-12-12T14:35:00+00:00","dateModified":"2025-02-07T09:43:41+00:00","description":"Tools like date difference calculators simplify the process by automating calculations, accounting for factors such as leap years and variations in calendar systems like the Gregorian calendar.","breadcrumb":{"@id":"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/donhit.com\/en\/time-calculators\/duration-between-two-dates\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Trang ch\u1ee7","item":"https:\/\/donhit.com\/en\/"},{"@type":"ListItem","position":2,"name":"Time Calculators","item":"https:\/\/donhit.com\/en\/category\/time-calculators\/"},{"@type":"ListItem","position":3,"name":"Duration Between Two Dates"}]},{"@type":"WebSite","@id":"https:\/\/donhit.com\/en\/#website","url":"https:\/\/donhit.com\/en\/","name":"DonHit - World of tools","description":"","publisher":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/donhit.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/0c6ff7dcd8ba4810c56a532f09c33148","name":"DonHit","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/donhit.com\/en\/wp-content\/uploads\/2024\/11\/logo-donhit.webp","contentUrl":"https:\/\/donhit.com\/en\/wp-content\/uploads\/2024\/11\/logo-donhit.webp","width":400,"height":267,"caption":"DonHit"},"logo":{"@id":"https:\/\/donhit.com\/en\/#\/schema\/person\/image\/"},"description":"DonHit is a website designed to provide useful tools for everyone. Its primary goal is to support and empower the community. All the tools available on the site are completely free to use.","sameAs":["https:\/\/donhit.com\/en"],"url":"https:\/\/donhit.com\/en\/author\/admin_don\/"}]}},"_links":{"self":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/comments?post=1615"}],"version-history":[{"count":4,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1615\/revisions"}],"predecessor-version":[{"id":2252,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/posts\/1615\/revisions\/2252"}],"wp:attachment":[{"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/media?parent=1615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/categories?post=1615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donhit.com\/en\/wp-json\/wp\/v2\/tags?post=1615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}