HH:MM with JavaScript

romsom
romsom used Ask the Experts™
Hi Experts,
The JavaScript below adds 3, 5, 7, and 12 minutes to the originally entered time.
How can I modify the code so that the calculated time is displayed in HH:MM format?  (e.g. 08:03 instead of 8:3)
Thank you for your help.
<html>
<head>
<title>Add Time</title>
<script language="javascript" type="text/javascript">
function CalcTime() {
  var myinput = document.getElementById('StartTime');
  var mydate = new Date();
  var mytime = myinput.value;

  var Time1 = document.getElementById('Time1');
  var time2 = document.getElementById('time2');
  var time3 = document.getElementById('time3');
  var time4 = document.getElementById('time4');

  if (mytime !== "") {
    // no format being tested
    var timearray = mytime.split(':');

    mydate = new Date(mydate.getFullYear(), mydate.getMonth(), mydate.getDate(), timearray[0], timearray[1], 0, 0);

    var mydatems = Date.parse(mydate);

    var newval = 0;

    newval = new Date(mydatems*1 + (3*60*1000));
    Time1.value = newval.getHours() + ":" + newval.getMinutes();

    newval = new Date(mydatems*1 + (5*60*1000));
    time2.value = newval.getHours() + ":" + newval.getMinutes();

    newval = new Date(mydatems*1 + (7*60*1000));
    time3.value = newval.getHours() + ":" + newval.getMinutes();

    newval = new Date(mydatems*1 + (12*60*1000));
    time4.value = newval.getHours() + ":" + newval.getMinutes();

  }
}
</script>
</head>

<body>

<form name="AddTime">
Start time<input type="text" value="00:00" name="StartTime" id='StartTime'><br />
Add minute:<input type="text" id='Time1' name="Time1" /><br />
Add minute:<input type="text" id='time2' name="Time2" /><br />
Add minute:<input type="text" id='time3' name="Time3" /><br />
Add minute:<input type="text" id='time4' name="Time4" /><br />
<input type="button" value="Calculate time" onclick='CalcTime()' />
</form>

</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
replace :
newval.getMinutes()

Open in new window

by :
(newval.getMinutes()>9)?newval.getMinutes():"0"+newval.getMinutes()

Open in new window


<html>
<head>
<title>Add Time</title>
<script language="javascript" type="text/javascript">
function CalcTime() {
  var myinput = document.getElementById('StartTime');
  var mydate = new Date();
  var mytime = myinput.value;

  var Time1 = document.getElementById('Time1');
  var time2 = document.getElementById('time2');
  var time3 = document.getElementById('time3');
  var time4 = document.getElementById('time4');

  if (mytime !== "") {
    // no format being tested
    var timearray = mytime.split(':');

    mydate = new Date(mydate.getFullYear(), mydate.getMonth(), mydate.getDate(), timearray[0], timearray[1], 0, 0);

    var mydatems = Date.parse(mydate);

    var newval = 0;

    newval = new Date(mydatems*1 + (3*60*1000));
    Time1.value = newval.getHours() + ":" + ((newval.getMinutes()>9)?newval.getMinutes():("0"+newval.getMinutes()));

    newval = new Date(mydatems*1 + (5*60*1000));
    time2.value = newval.getHours() + ":" + ((newval.getMinutes()>9)?newval.getMinutes():("0"+newval.getMinutes()));

    newval = new Date(mydatems*1 + (7*60*1000));
    time3.value = newval.getHours() + ":" + ((newval.getMinutes()>9)?newval.getMinutes():("0"+newval.getMinutes()));

    newval = new Date(mydatems*1 + (12*60*1000));
    time4.value = newval.getHours() + ":" + ((newval.getMinutes()>9)?newval.getMinutes():("0"+newval.getMinutes()));

  }
}
</script>
</head>

<body>

<form name="AddTime">
Start time<input type="text" value="00:00" name="StartTime" id='StartTime'><br />
Add minute:<input type="text" id='Time1' name="Time1" /><br />
Add minute:<input type="text" id='time2' name="Time2" /><br />
Add minute:<input type="text" id='time3' name="Time3" /><br />
Add minute:<input type="text" id='time4' name="Time4" /><br />
<input type="button" value="Calculate time" onclick='CalcTime()' />
</form>

</body>
</html>

Open in new window

romsomIT Developer

Author

Commented:
Thank you very much. I did the same with the hours and now it looks great:

((newval.getHours()>9)?newval.getHours():("0"+newval.getHours()))
leakim971Multitechnician
Top Expert 2014
you welcome

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial