Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Time difference

Posted on 2016-11-08
10
Medium Priority
?
59 Views
Last Modified: 2016-11-09
Hi I asked this question before, thought I had a working solution, but I'm back again. I have two time inputes, and want to be able to display the difference between the two on the form on a button click. the two text boxes are starttime1 and endtime1, and on a button click I want to display the time passed in a separate text box. How can I go about this?
0
Comment
Question by:peter Ojeda
  • 4
  • 4
  • 2
10 Comments
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 41879022
Do you want to do this in PHP?  If so, these articles show ways of doing date/time arithmetic.

Procedural
https://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL-Procedural-Version.html

Object-oriented
https://www.experts-exchange.com/articles/20920/Handling-Time-and-Date-in-PHP-and-MySQL-OOP-Version.html

If you want to do this on the client-side (in the browser without reference to PHP) you might use "Request attention" and ask a moderator to add the question to the JavaScript Zone.
0
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 total points
ID: 41879373
This is not a PHP solution and you did not state how you want the difference represented but here is a shot at a client side JavaScript / jQuery solution.
	Start Time <input type="text" name="starttime1" id="starttime1" />
	End Time <input  type="text" name="endtime1" id="endtime1"/>
	Difference <input type="text" name="difference" readonly id="difference"/>
	<br/>
	<button class="calculate btn btn-primary">Calculate</button>

Open in new window

jQuery
<script>
$(function() {
  $('.calculate').click(function() {
    var starttime1 = new Date ($('#starttime1').val());
    var endtime1 = new Date($('#endtime1').val());

    var diff = endtime1.getTime() - starttime1.getTime();
    $('#difference').val(diff);
  });
})
</script>

Open in new window

Working sample here
1
 
LVL 1

Author Comment

by:peter Ojeda
ID: 41879375
Hi sorry you are right I forgot to add that part. I am attempting to find the number of minutes passed from start time to end time.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 111

Expert Comment

by:Ray Paseur
ID: 41879429
Here's a PHP solution.  We create a user-defined function to compute the elapsed minutes between any two valid Date/Time strings.

Supported formats for Date/Time strings are here: http://php.net/manual/en/datetime.formats.php
<?php // demo/temp_ojeda.php
/**
 * https://www.experts-exchange.com/questions/28981779/Time-difference.html
 *
 * https://www.experts-exchange.com/articles/20920/Handling-Time-and-Date-in-PHP-and-MySQL-OOP-Version.html
 * Note: UTC does not observe daylight savings time, so the elapsed computations will be correct throughout the year.
 */
error_reporting(E_ALL);
echo '<pre>';


// DEFINE A FUNCTION TO COMPUTE ELAPSED MINUTES
function elapsed_minutes($alpha, $omega, $zone='UTC')
{
    try
    {
        $tzone      = new DateTimeZone($zone);
        $date_alpha = new DateTime($alpha, $tzone);
        $date_omega = new DateTime($omega, $tzone);
    }
    catch(Exception $e)
    {
        trigger_error($e->getMessage(), E_USER_WARNING);
        return FALSE;
    }
    $elapsed = (int)round( ( $date_omega->format('U') - $date_alpha->format('U') ) / 60);
    return $elapsed;
}


// USE THE FUNCTION
$alpha = "2:30:47pm";
$omega = "3:43:12pm";
var_dump( elapsed_minutes($alpha, $omega) );

$alpha = "Yesterday 2:30:47pm";
$omega = "3:43:12pm";
var_dump( elapsed_minutes($alpha, $omega) );

Open in new window

0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 41879509
This may be a little better.  It's a two-step solution.  Using AJAX you can get the expressive power of the PHP supported date/time strings without having to write a lot of JavaScript code.  You may want to add some sanity checks to this, but it seems to work OK if it's given useful inputs.

Test here: https://iconoun.com/demo/temp_peter_ojeda_client.php

Server-side script:
<?php // demo/temp_peter_ojeda_server.php
/**
 * https://www.experts-exchange.com/questions/28981779/Time-difference.html
 *
 * https://www.experts-exchange.com/articles/20920/Handling-Time-and-Date-in-PHP-and-MySQL-OOP-Version.html
 * Note: UTC does not observe daylight savings time, so the elapsed computations will be correct throughout the year.
 */
error_reporting(E_ALL);


// DEFINE A FUNCTION TO COMPUTE ELAPSED MINUTES
function elapsed_minutes($alpha, $omega, $zone='UTC')
{
    try
    {
        $tzone      = new DateTimeZone($zone);
        $date_alpha = new DateTime($alpha, $tzone);
        $date_omega = new DateTime($omega, $tzone);
    }
    catch(Exception $e)
    {
        return $e->getMessage();
    }
    $elapsed = (int)round( ( $date_omega->format('U') - $date_alpha->format('U') ) / 60);
    return $elapsed;
}


// USE THE FUNCTION
echo elapsed_minutes( $_GET['alpha'], $_GET['omega'] );

Open in new window

Client-side script:
<?php // demo/temp_peter_ojeda_client.php
/**
 * https://www.experts-exchange.com/questions/28981779/Time-difference.html
 */
error_reporting(E_ALL);


// CREATE OUR WEB PAGE IN HTML5 FORMAT, USING HEREDOC SYNTAX
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style type="text/css">
/* STYLE SHEET HERE */
</style>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#go").click(function(){
        var alpha = $("input[name=alpha]").val();
        var omega = $("input[name=omega]").val();
        $.get("temp_peter_ojeda_server.php", {alpha:alpha, omega:omega}, function(resp){
            $("input[name=lapse]").val(resp)
        });
    });
});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<p>Enter Start and End date/time strings, then <input id="go" type="button" value="click here" />
<br>
Start: <input name="alpha" /> End: <input name="omega" /> Elapsed Minutes: <input name="lapse" readonly />
</p>
</body>
</html>
HTML5;


// RENDER THE WEB PAGE
echo $htm;

Open in new window

HTH, ~Ray
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41879912
Can you confirm if you are interested in a PHP (server side soution) or JavaScript / jQuery (client side solution)
Minutes
HTML
    <form action="reflect.php" method="post">
      Start Time <input type="text" name="starttime1" id="starttime1" />
      End Time <input  type="text" name="endtime1" id="endtime1"/>
      Difference (ms) <input type="text" name="milliseconds" readonly id="milliseconds"/>
      Difference (min) <input type="text" name="minutes" readonly id="minutes"/>
      <br/>
      <button class="calculate btn btn-primary">Calculate</button>
	  <button class="btn btn-primary" type="submit">Submit</button>
  </form>

Open in new window

jQuery
<script>
$(function() {
  $('.calculate').click(function(e) {
    e.preventDefault();
    var starttime1 = new Date ($('#starttime1').val());
    var endtime1 = new Date($('#endtime1').val());

	
    var ms = (endtime1.getTime() - starttime1.getTime());
	var minutes = ms / 60000
    $('#milliseconds').val(ms);
    $('#minutes').val(minutes);
  });
})
</script>

Open in new window

Updated sample here
0
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 total points
ID: 41879914
Using AJAX you can get the expressive power of the PHP supported date/time strings without having to write a lot of JavaScript code.
That's why we have libraries like MomentJs http://momentjs.com/
2
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 41880409
@Julian: That's a good idea, but I don't know enough MomentJS to produce a practical solution with a code sample!
1
 
LVL 1

Author Comment

by:peter Ojeda
ID: 41880459
Thankyou Julian MomentJs looks very helpful I will look more into that.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41880834
You are welcome.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question