[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 212
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
X-quisiteAuthor Commented:
Ray_Paseur,

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

0
 
HonorGodCommented:
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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