How to Display the Hours & Minutes in Two Fields With Javascript
JavaScript provides a broad array of functions for manipulating dates and time. The programmer can access Date object methods that provide the current day, year, month, timezone, exact time and more. The JavaScript method getTime() will return the current time, but the result is in milliseconds. Most people prefer seeing the time displayed as hours, minutes and seconds. Use the Date object methods getHours() and getMinutes() to store the current hour and minutes in separate variables that can be displayed as different fields.
Other People Are Reading
Instructions
-
-
1
Launch the standard, plain-text text editor application that is available on your computer.
-
2
Enter the following code into the text editor.
<html>
<body>
<script language="javascript">
var thedate = new Date();
var hours=thedate.getHours();
var minutes=thedate.getMinutes();
document.write("Hours field: "+hours);
document.write("");
document.write("Minutes field: "+minutes);
document.write("");
</script>
</body>
</html>
-
-
3
Click the File menu. Select the "Save" option. Save under the file name "test.html."
-
4
Launch the web browser that is available on your computer. Click on the "File" menu item, and select "Open File."
-
5
Locate the file "test.html" just created, select it with the mouse, then click on "Open."
-
1
Tips & Warnings
JavaScript allows you to create your own functions and reuse them later in other scripts. Create your own HoursandMinutes() function following this example:
<html>
<head>
<script language="javascript">
function HoursandMinutes()
{
var thedate = new Date();
var minutes=thedate.getMinutes();
var hours=thedate.getHours();
if(hours>12)
{ hours=hours-12; }
document.write(" The time is : "+minutes+ " minutes past ");
document.write(hours+" o'clock!");
}
</script>
</head>
<body>
<input type="button" value="Get the time!" onclick="HoursandMinutes()" />
</body>
</html>
JavaScript's Date method results may require some additional formatting to display time in the customary matter. Two minutes past 3 p.m. is normally written as 3:02. JavaScripts getMinutes() method will return the correct information, but without the leading "0". Add a routine to your script that adds the zero if the number of minutes is less than 10. Example:
<script language="javascript">
var thedate = new Date();
var minutes=thedate.getMinutes();
minutes=("00" + minutes).slice(-2);
document.write("The slice method works! -- Minutes field: "+minutes);
</script>
References
Resources
- Photo Credit Stockbyte/Retrofile/Getty Images
