• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 214
  • Last Modified:

how to calculate time difference with java script

I have form, see below, that has two combo fileds, start and finish time and a text filed with hrs.
the text filed hrs should display the difference between the start and finish time.

i think we have to use javascript, but i have no idea about java script.

hope someone can help

see form below:



<table id='event'>
      <fieldset >
              <legend><h2>Event Details</h2></legend>
              
              <tr>
                     <td style="margin-top:10px;">Event Date</td>
                     <td style="margin-top:10px;" >Start Time</td>
                     <td style="margin-top:10px;" >Finish Time</td>
                     <td style="margin-top:10px;" >Hours</td>
              </tr>
              
              <tr>
                     <td> <input type="text"  name="date"></input></td>
                     <td>
                           <select name="start" />
                              <option value="">Choose</option>
                              <option value="0600">0600</option>
                              <option value="0630">0630</option>
                              <option value="0700">0700</option>
                              <option value="0730">0730</option>
                              <option value="0800">0800</option>
                              <option value="0830">0830</option>
                              <option value="0900">0900</option>
                              <option value="0930">0930</option>
                              <option value="1000">1000</option>
                              <option value="1030">1030</option>
                              <option value="1100">1100</option>
                              <option value="1130">1130</option>
                              <option value="1200">1200</option>
                        </select>
                  </td>
                     <td>
                           <select name="finish" />
                              <option value="">Choose</option>
                              <option value="0600">0600</option>
                              <option value="0630">0630</option>
                              <option value="0700">0700</option>
                              <option value="0730">0730</option>
                              <option value="0800">0800</option>
                              <option value="0830">0830</option>
                              <option value="0900">0900</option>
                              <option value="0930">0930</option>
                              <option value="1000">1000</option>
                              <option value="1030">1030</option>
                              <option value="1100">1100</option>
                              <option value="1130">1130</option>
                              <option value="1200">1200</option>
                        </select>
                     </td>
                     <td> <input type="text"  size="5" name="hours"></td>
                     
              </tr>
              <tr>
                    <td> <textarea name="event-comment" cols=8 rows=3></textarea></td>
              </tr>
                            
        </fieldset>
        
</table>
<input type="submit" name="save" value="submit">

</form>



0
X-quisite
Asked:
X-quisite
1 Solution
 
Ray PaseurCommented:
Why not do it in PHP inside the action script?  You have to check and validate your variables there anyway.  Or are you looking to do an AJAX-like thing where you change the form as the client inputs data?

If you want to do date/time calculations in PHP, the functions you need are strtotime() and date().

strtotime() will take the human readable input and turn it into a UNIX timestamp.  date() will take the timestamp and format it in human-readable text.

Inside your application, you will want to carry all the date / time strings in the ISO8601 format.  This is human-readable (if not pretty) and works with SQL DATETIME fields.

HTH, ~Ray
0
 
leakim971PluritechnicianCommented:
Hello X-quisite,

Please finish :)


<html><head>
<script language="javascript">
	function getDiff() {
		a = document.getElementById("finish").options[document.getElementById("finish").selectedIndex].value;
		b = document.getElementById("start").options[document.getElementById("start").selectedIndex].value;
		if((a!=null)&&(b!=null)) document.getElementById("date").value = a - b;
}
</script>
<table id='event'>
      <fieldset >
              <legend><h2>Event Details</h2></legend>
              
              <tr>
                     <td style="margin-top:10px;">Event Date</td>
                     <td style="margin-top:10px;" >Start Time</td>
                     <td style="margin-top:10px;" >Finish Time</td>
                     <td style="margin-top:10px;" >Hours</td>
              </tr>
              
              <tr>
                     <td> <input type="text" id="date" name="date"></input></td>
                     <td> 
                           <select name="start" id="start"  onchange="getDiff()" />
                              <option value="">Choose</option>
                              <option value="0600">0600</option>
                              <option value="0630">0630</option>
                              <option value="0700">0700</option>
                              <option value="0730">0730</option>
                              <option value="0800">0800</option>
                              <option value="0830">0830</option>
                              <option value="0900">0900</option>
                              <option value="0930">0930</option>
                              <option value="1000">1000</option>
                              <option value="1030">1030</option>
                              <option value="1100">1100</option>
                              <option value="1130">1130</option>
                              <option value="1200">1200</option>
                        </select>
                  </td>
                     <td>
                           <select name="finish" id="finish"  onchange="getDiff()" />
                              <option value="">Choose</option>
                              <option value="0600">0600</option>
                              <option value="0630">0630</option>
                              <option value="0700">0700</option>
                              <option value="0730">0730</option>
                              <option value="0800">0800</option>
                              <option value="0830">0830</option>
                              <option value="0900">0900</option>
                              <option value="0930">0930</option>
                              <option value="1000">1000</option>
                              <option value="1030">1030</option>
                              <option value="1100">1100</option>
                              <option value="1130">1130</option>
                              <option value="1200">1200</option>
                        </select> 
                     </td>
                     <td> <input type="text"  size="5" name="hours"></td>
                     
              </tr>
              <tr>
                    <td> <textarea name="event-comment" cols=8 rows=3></textarea></td>
              </tr>
                            
        </fieldset>
        
</table>
<input type="submit" name="save" value="submit">

</form>
</body>
</html>

Open in new window

0
 
X-quisiteAuthor Commented:
leakim971,

there are few problems with your solution, it gives 500 and not 5.0 for (0600 - 1100) and shows 70 for (0600 - 0630).

0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
X-quisiteAuthor Commented:
Ray_Paseur,

your suggestion sounds good. but im not procficient with php so dont no what to do?

0
 
HonorGodSoftware EngineerCommented:
This article explains how to compute the difference between 2 dates, and includes the difference in hours, minutes, and seconds.

http://www.experts-exchange.com/articles/Programming/Languages/Scripting/JavaScript/2-Dates-What%27s-the-difference.html

Might it help?
0
 
leakim971PluritechnicianCommented:
>Please finish :(

Try this :
<html><head>
<script language="javascript">
	function getDiff() {
		a = document.getElementById("finish").options[document.getElementById("finish").selectedIndex].value;
		b = document.getElementById("start").options[document.getElementById("start").selectedIndex].value;
		if((a.length>0)&&(b.length>0)&&(a>b)) {
			d1 = new Date();
			d2 = new Date();
			h1 = d1.setTime(parseInt(a/100)*3600000 + parseInt(a%100)*60000);
			h2 = d2.setTime(parseInt(b/100)*3600000 + parseInt(b%100)*60000);
			minutes = (h1-h2)/60000;
			h = parseInt(minutes/60);
			m = parseInt(minutes%60);
			document.getElementById("date").value = ((h>9)?h:"0"+h) + ":" + ((m>9)?m:"0"+m);
		} 
		else {
			document.getElementById("date").value = "";
		}
}
</script>
<table id='event'>
      <fieldset >
              <legend><h2>Event Details</h2></legend>
              
              <tr>
                     <td style="margin-top:10px;">Event Date</td>
                     <td style="margin-top:10px;" >Start Time</td>
                     <td style="margin-top:10px;" >Finish Time</td>
                     <td style="margin-top:10px;" >Hours</td>
              </tr>
              
              <tr>
                     <td> <input type="text" id="date" name="date"></input></td>
                     <td> 
                           <select name="start" id="start"  onchange="getDiff()" />
                              <option value="">Choose</option>
                              <option value="0600">0600</option>
                              <option value="0630">0630</option>
                              <option value="0700">0700</option>
                              <option value="0730">0730</option>
                              <option value="0800">0800</option>
                              <option value="0830">0830</option>
                              <option value="0900">0900</option>
                              <option value="0930">0930</option>
                              <option value="1000">1000</option>
                              <option value="1030">1030</option>
                              <option value="1100">1100</option>
                              <option value="1130">1130</option>
                              <option value="1200">1200</option>
                        </select>
                  </td>
                     <td>
                           <select name="finish" id="finish"  onchange="getDiff()" />
                              <option value="">Choose</option>
                              <option value="0600">0600</option>
                              <option value="0630">0630</option>
                              <option value="0700">0700</option>
                              <option value="0730">0730</option>
                              <option value="0800">0800</option>
                              <option value="0830">0830</option>
                              <option value="0900">0900</option>
                              <option value="0930">0930</option>
                              <option value="1000">1000</option>
                              <option value="1030">1030</option>
                              <option value="1100">1100</option>
                              <option value="1130">1130</option>
                              <option value="1200">1200</option>
                        </select> 
                     </td>
                     <td> <input type="text"  size="5" name="hours"></td>
                     
              </tr>
              <tr>
                    <td> <textarea name="event-comment" cols=8 rows=3></textarea></td>
              </tr>
                            
        </fieldset>
        
</table>
<input type="submit" name="save" value="submit">

</form>
</body>
</html>

Open in new window

0
 
X-quisiteAuthor Commented:
thanks
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks for the points!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now