https:\/\/www.calculator.io\/time-duration-calculator\/<\/a><\/p>\n\nUsage<\/h3>\n\n
Add the Time Duration Calculator shortcode to your page, post or sidebar:<\/p>\n\n
[ci_time_duration_calculator]\n<\/code><\/pre>\n\nOr add the following code to your template where you would like the Time Duration Calculator to appear:<\/p>\n\n
<?php echo do_shortcode( '[ci_time_duration_calculator]' ); ?>\n<\/code><\/pre>\n\nAll attributes are optional:<\/p>\n\n
\ntitle<\/code> - 1<\/code> (default) shows the calculator heading with its icon, 0<\/code> hides it. Example: [ci_time_duration_calculator title=\"0\"]<\/code><\/li>\ntheme<\/code> - light<\/code> (default), dark<\/code>, or auto<\/code> to follow the visitor's light\/dark system setting. Example: [ci_time_duration_calculator theme=\"auto\"]<\/code><\/li>\naccent<\/code> - an accent colour for buttons and highlights, as a hex value. Example: [ci_time_duration_calculator accent=\"#2563eb\"]<\/code><\/li>\nmax_width<\/code> - the widest the calculator may be: a number followed by px<\/code>, %<\/code> or rem<\/code>. The calculator is centred when it is narrower than its column. Example: [ci_time_duration_calculator max_width=\"720px\"]<\/code><\/li>\n<\/ul>\n\nAttributes can be combined: [ci_time_duration_calculator title=\"0\" theme=\"auto\" accent=\"#2563eb\" max_width=\"720px\"]<\/code><\/p>\n\nSource code and libraries<\/h3>\n\n
The plugin's own JavaScript and CSS are shipped unminified and human-readable: assets\/js\/*.js<\/code> (except assets\/js\/lib\/<\/code>), assets\/css\/main.css<\/code>, assets\/css\/ci-widget.css<\/code>, assets\/css\/ci-embed.css<\/code> and the PHP file. main.css<\/code> is the compiled, unminified stylesheet of calculator.io. The calculator is also published on the calculator.io website: https:\/\/www.calculator.io\/time-duration-calculator\/<\/p>\n\nThird-party libraries bundled in assets\/js\/lib\/<\/code>. Where a file is minified, the readable source is available at the upstream address:<\/p>\n\n\n- math.js 3.37.1 (Apache-2.0) -
assets\/js\/lib\/math.min.js<\/code>, minified build. Source: https:\/\/github.com\/josdejong\/mathjs<\/li>\n- marked 15.0.12 (MIT) -
assets\/js\/lib\/marked.min.js<\/code>, minified build. Source: https:\/\/github.com\/markedjs\/marked<\/li>\n- Inputmask 5.0.9-beta.70 (MIT) -
assets\/js\/lib\/input-mask.min.js<\/code>, minified build. Source: https:\/\/github.com\/RobinHerbots\/Inputmask<\/li>\n- lazysizes 5.3.2 (MIT) -
assets\/js\/lib\/lazysizes.js<\/code>. Source: https:\/\/github.com\/aFarkas\/lazysizes<\/li>\n- Air Datepicker 3.3.0 (MIT) -
assets\/js\/lib\/air-datepicker.js<\/code>. Source: https:\/\/github.com\/t1m0n\/air-datepicker<\/li>\n- Inter font (SIL Open Font License 1.1) -
assets\/fonts\/inter-v20-latin.woff2<\/code>. Source: https:\/\/github.com\/rsms\/inter<\/li>\n<\/ul>\n\n\n\n- Upload the \/ci-time-duration-calculator\/ folder to the \/wp-content\/plugins\/ directory, or install the plugin from the Plugins screen.<\/li>\n
- Activate the Time Duration Calculator plugin through the \"Plugins\" menu in WordPress.<\/li>\n
- Add the
[ci_time_duration_calculator]<\/code> shortcode to a page or post.<\/li>\n<\/ol>\n\n\n\nHow do I add the calculator to a page?<\/h3><\/dt>\nAdd the shortcode [ci_time_duration_calculator]<\/code> to a page or post. In the block editor use a Shortcode block. In a theme template use <?php echo do_shortcode( '[ci_time_duration_calculator]' ); ?><\/code>.<\/p><\/dd>\nWhich shortcode attributes are available?<\/h3><\/dt>\ntitle (1 or 0), theme<\/code> (light, dark or auto), accent<\/code> (a hex colour such as #2563eb) and max_width<\/code> (for example 720px, 80% or 40rem). See the Usage section for examples. Invalid values are ignored and the default is used instead.<\/p><\/dd>\nHow do I get a dark calculator?<\/h3><\/dt>\nUse theme=\"dark\"<\/code> for always dark, or theme=\"auto\"<\/code> to follow the visitor's light\/dark system setting. The default, theme=\"light\"<\/code>, keeps the calculator light on any background.<\/p><\/dd>\nCan I hide the heading?<\/h3><\/dt>\nYes. Use title=\"0\"<\/code> and the heading with the calculator's icon is not printed, so you can write your own.<\/p><\/dd>\nDoes the plugin send data anywhere?<\/h3><\/dt>\nNo. The calculation happens in the visitor's browser, nothing they enter leaves the page, and the plugin makes no requests to calculator.io or any other external service. It sets no cookies and loads no ads or trackers.<\/p><\/dd>\n
The calculator is the wrong height or has a scrollbar.<\/h3><\/dt>\nThe frame adjusts its height automatically while the page is open. If your theme or a caching or optimisation plugin removes scripts from the page, the frame keeps a default height; exclude the plugin's ci-embed.js<\/code> file from script optimisation.<\/p><\/dd>\nHow do I calculate the time duration between two times?<\/h3><\/dt>\nEnter your start and end times into the single-day calculator, then click \"Calculate\" to see the exact duration. The \"Now\" buttons fill in the current time automatically, and the result appears instantly in hours, minutes, and seconds.<\/p><\/dd>\n
How do I calculate the time between two dates?<\/h3><\/dt>\nUse the time between two dates calculator: enter the start and end month, day, and year, using the calendar popup or \"Now\" button if needed. You can also add exact start and end times for down-to-the-minute accuracy, then click \"Calculate\" to get the elapsed time.<\/p><\/dd>\n
What result formats does the time duration calculator show?<\/h3><\/dt>\nThe single-day calculator displays the result as hours, minutes, seconds, decimal hours, and decimal minutes. The two-dates calculator adds days and decimal days, showing the elapsed time in days, hours, minutes, seconds, decimal days, decimal hours, and decimal minutes.<\/p><\/dd>\n
How do you manually calculate elapsed time on a 12-hour clock?<\/h3><\/dt>\nYou first convert both times to 24-hour (military) format before doing the math, so 4:28 PM becomes 16:28 while 7:39 AM stays the same. This calculator performs these multi-step conversions instantly, removing the mental gymnastics of AM\/PM math.<\/p><\/dd>\n
Does the calculator account for different month lengths and leap years?<\/h3><\/dt>\nYes. Months vary in length and February shifts between 28 and 29 days depending on the leap year cycle, so the tool determines the exact duration automatically. You only enter the starting and ending dates without memorizing which years are leap years.<\/p><\/dd>\n\n<\/dl>\n\n\n
1.1.0<\/h4>\n\n\n- New shortcode attributes:
title<\/code>, theme<\/code> (light, dark, auto), accent<\/code> and max_width<\/code><\/li>\n- Responsive layout: form and results wrap into one column on narrow pages, wide tables scroll inside their own box<\/li>\n
- The frame now follows the calculator's height when it changes or the window is resized<\/li>\n
- Fixed the missing heading icon<\/li>\n
- The plugin's JavaScript and CSS are now shipped unminified<\/li>\n
- The WordPress-side script and styles load only on pages that use the shortcode<\/li>\n<\/ul>\n\n
1.0.1<\/h4>\n\n\n- Removed leftover files of earlier plugin versions<\/li>\n
- Tested up to WordPress 7.1<\/li>\n<\/ul>\n\n
1.0.0<\/h4>\n\n\n- Initial release of Time Duration Calculator<\/li>\n<\/ul>","raw_excerpt":"Calculate the exact time between two dates or events with our Time Duration Calculator.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/390585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=390585"}],"author":[{"embeddable":true,"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/calculatorio"}],"wp:attachment":[{"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=390585"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=390585"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=390585"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=390585"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=390585"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/et.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=390585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}