CINXE.COM
Time Calculator
<!doctype html> <html> <head> <title>Time Calculator</title> <meta name="description" content="Calculate the time difference instantly as you type. It handles everything from minutes to years. Figure out the amount of time after a certain day." /> <!-- Browser meta tags --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="icon" href="/assets/img/blue-calendar-favicon/blue-calendar.svg" /> <link rel="shortcut icon" type="image/png" href="/assets/img/blue-calendar-favicon/blue-calendar-300.png"/> <link rel="apple-touch-icon" href="/assets/img/blue-calendar-favicon/square-calendar-300.png" /> <!-- CSS Includes --> <link href="https://fonts.googleapis.com/css?family=Open+Sans" type='text/css' rel='stylesheet' > <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" type='text/css' rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Google Analytics - with 'google_analytics_id' as variable --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-12539927-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-12539927-1'); </script> <script type="text/javascript"> window.lstrings = { "LOCAL_TIME":"Local time", "YOUR_LOCAL_TIME":"Your local time", "NEXT_DAY":"next day", "LOCALE":"en", "HTTP_ACCEPT_LANGUAGE":'<!--#echo var="HTTP_ACCEPT_LANGUAGE" -->', } var loc_strings = {} var SERVER_URL = window.location.origin; var TYPESENSE_URL = 'https://dateful.com/app2'; var TYPESENSE_API_KEY = 'ywkaaYXX39trymoVSUgMNeLFGnbE4Kae'; window.AUTOCOMPLETE_URL = SERVER_URL + '/app/'; window.GET_CO_URL = SERVER_URL + '/app/item/'; window.GET_OLDTTZC_URL = SERVER_URL + '/app/oldttzc/'; window.TYPESENSE = TYPESENSE_URL + '/collections/timezones-' + window.lstrings['LOCALE'] + '/documents/search'; window.TYPESENSE_API_KEY = TYPESENSE_API_KEY; </script> <!-- CSS --> <link href="/assets/css/main.css" rel="stylesheet"> <!--My includes--> <script src="/assets/js/main.js" type="text/javascript"></script> <!--Library Includes--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <script src="/assets/js/luxon.min.js"></script> </head> <body class=""> <section></section> <div class="container calc"> <h1 class="text-center mb-3 title">Time Calculator</h1> <!-- Nav widget --> <div class="row justify-content-center mb-4"> <div class="col col-md-8 col-lg-6"> <h3> <div class="navwidget" style="display:table; margin:0 auto; position:relative; width:100%;"> <div id="" class="widget-bg rounded" style=" display:table-cell; position:absolute; width:46%; z-index:-1; top:5px; left:4px; padding:3px;"> </div> <div id="" class="text-center" style="display:table-cell; width:45%;"> <span style="color:white;">Time Between</span> </div> <div style="display:table-cell; width:10%;"> </div> <div id="" class="text-center" style="display:table-cell; width:45%;"> <a href="/time-calculator/after"> Add Subtract </a> </div> </div> </h3> </div> </div> <!-- Left and right inputs --> <div id="input_holder" class="row justify-content-center"> <div class="col col-md-8"> <div class="row justify-content-center"> <!-- Time input 1 --> <div class="form-group col"> <label id="start-label" for="time1">Start</label> <div style="position:relative;"> <div class="timeinfo" id="time1i" onclick="document.getElementById('time1').focus();"></div> <input id="time1" class="time-input" type="search" tabindex="1" /> <div class="confirmation" style="font-size:11px; color:#72B6EC; margin-top:5px; margin-left:5px;"></div> </div> </div> <!-- Middle Label --> <!-- Time input 2 --> <div class="form-group col"> <label id="end-label" for="time2">End</label> <div style="position:relative;"> <div class="timeinfo" id="time2i" onclick="document.getElementById('time2').focus();"></div> <input id="time2" class="time-input" type="search" tabindex="1" /> <div class="confirmation" style="font-size:11px; color:#72B6EC; margin-top:5px; margin-left:5px;"></div> </div> </div> </div> </div> </div> <!-- Widget holder --> <div class="row justify-content-center pb-3"> <!-- 24h Widget --> <div class="col-4 col-md-2 text-center"> <label for="widget-1224" class="visuallyhidden">12 hour 24 hour toggle</label> <div id="widget-1224" class="widget" style="display:inline-block; position:relative;"> <div id="bg1224" class="widget-bg rounded" style="display:table-cell; position:absolute; width:60%; right: 48%; z-index:-1;"> </div> <div id="w12" style="display:table-cell; width:45%;">12</div> <div style="display:table-cell; width:10%;"> </div> <div id="w24" style="display:table-cell; width:45%">24</div> </div> </div> </div> <div class="row justify-content-center"> <!-- Time/Date Widget --> <div class="col-4 col-md-2 mb-4"> <label for="td-widget" class="visuallyhidden">Time Date toggle</label> <div id="td-widget" class="widget" style="display:table; position:relative;"> <div id="timedate-bg" class="widget-bg rounded" style="display:table-cell; position:absolute; width:55%; right:52%; top:0px; z-index:-1;"> </div> <div id="widget-time" class="sm-font align-middle w-selected" style="display:table-cell; width:45%;">TIME</div> <div style="display:table-cell; width:10%;"> </div> <div id="widget-date" class="sm-font align-middle" style="display:table-cell; width:45%;">DATE</div> </div> </div> </div> <!-- Result pane --> <div class="row justify-content-center"> <div class="col col-md-8"> <div id="result" class="border rounded p-3" style="display:block; min-height:104px;"> <span id="result-text"></span> </div> </div> </div> </div> <section class="flex"> <section></section> <section> <div class="mx-auto" style="width:320px;"> </div> </section> <section></section> <footer class="mt-3 pb-sm-3 pb-1 mx-3"> <div style="text-transform: uppercase;"> <a href="https://dateful.com/about.html">About</a> · <a href="mailto:jonathan@dateful.com">Feedback</a> · <a href="https://dateful.com/eventlink">Eventlink</a> · <a href="https://dateful.com/time-calculator">Time Calculator</a> · <a href="https://dateful.com/world-clock">World Clock</a> · <a href="https://dateful.com/schedule">Schedule <sup class="homepage">New</sup></a> </div> </footer> </section> <script> var app = main.Dateful.BetweenCalculator.create(lstrings); </script> </body> </html>