JavaScirpt Tutorial Index

JavaScript Tutorial Javascript Example Javascript comment Javascript Variable Javascript Data Types Javascript Operators Javascript If Else Javascript Switch Statement Javascript loop JavaScript Function Javascript Object JavaScript Arrays Javascript String Javascript Date Javascript Math Javascript Number Javascript Dialog Box Javascript Window Object Javascript Document Object Javascript Event Javascript Cookies Javascript getElementByID Javascript Forms Validation Javascript Email Validation Javascript Password Validation Javascript Re-Password Validation Javascript Page Redirect Javascript Print

Misc

JavaScript P5.js JavaScript Minify JavaScript redirect URL with parameters Javascript Redirect Button JavaScript Ternary Operator JavaScript radio button checked value JavaScript moment date difference Javascript input maxlength JavaScript focus on input Javascript Find Object In Array JavaScript dropdown onchange JavaScript Console log Multiple variables JavaScript Time Picker Demo JavaScript Image resize before upload Functional Programming in JavaScript JavaScript SetTimeout() JavaScript SetInterval() Callback and Callback Hell in JavaScript Array to String in JavaScript Synchronous and Asynchronous in JavaScript Compare two Arrays in JavaScript Encapsulation in JavaScript File Type Validation while Uploading Using JavaScript or jquery Convert ASCII Code to Character in JavaScript Count Character in string in JavaScript Get First Element of Array in JavaScript How to convert array to set in JavaScript How to get current date and time in JavaScript How to Remove Special Characters from a String in JavaScript Number Validation in JavaScript Remove Substring from String in JavaScript

Interview Questions

JavaScript Interview Questions

JavaScript Time Picker Demo

Time Pickers in JavaScript are lightweight and mobile-friendly controls that let the users enter or select date and time values. These values can be from a pop-up calendar or a drop-down time list.

These time pickers allow easy navigation to the desired time based on the user’s inputs.

Time Picker in JavaScript

The input tag and the attribute of type= “time” are used to pick JavaScript's time values. This tag is used for entering a time. The time entered can be in the format of hours, minutes, and optionally seconds.

This function is supported by mostly all the browsers like Google chrome 20.0, Microsoft Edge 12.0, Oracle 10.1, Firefox 57.0 etc. However, Safari and Internet Explorer 12 and older versions do not support it.

Format of time pickers:

hh:mm:ss:ms

Here,

  • “hh” denotes hours
  • “mm” denotes minutes
  • “ss” denotes seconds
  • “ms” denotes milliseconds

For example, “22:33:40:15” , “13:45:40:09” , “07:59:30:11” etc.

Usage of time-pickers

  • Selecting interview slots
  • Marking meeting schedules
  • In Time tables
  • Exam Slot bookings
  • Choosing movie/show timings etc.

Syntax:

<input type="time">

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Time Picker</title>     
   </head>
<style>
label {
    display: block;
    font: 2 rem sans-serif;
}


input,
label {
    margin: .6rem 0;
}
</style>
<body>
<h3>Time-Picker Control In JavaScript</h3>
<p>In the box given below, choose a time for your interview:</p>
<form action="/action_page.php">
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt"><br>
  <input type="submit">
</form>
</body>
</html>

Output:

JavaScript Time Picker Demo

If we select the clock icon in the input field, a drop-down appears as shown below,

JavaScript Time Picker Demo

Note: We can set default values of time also,  by including a valid time in the <input> element using the value attribute, as shown in the example below:

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Time Picker</title>     
   </head>
<body>
<h3>Time-Picker Control In JavaScript</h3>
<p>In the box given below, choose a time for your interview:</p>
<form action="/action_page.php">
  <label for="appt">Select a time:</label>
  <input id="appt-time" type="time" name="appt-time" value="12:00"><br>
  <input type="submit">
</form>
</body>
</html>

Or it can be written using JavaScript like,

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Time Picker</title>     
   </head>
<body>
<h3>Time-Picker Control In JavaScript</h3>
<p>In the box given below, choose a time for your interview:</p>
<form action="/action_page.php">
  <label for="appt">Select a time:</label>
  <input id="appt-time" type="time" name="appt-time"></br>
  <input type="submit">
</form>
</body>
<script>
var defvalue = document.querySelector('input[type="time"]');
defvalue.value = '12:00';
</script>
</html>

If we select the input field, a drop-down appears as shown below,

JavaScript Time Picker Demo

Note: We can set default values of time also,  by including a valid time in the <input> element using the value attribute, as shown in the example below:

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Time Picker</title>     
   </head>
<body>
<h3>Time-Picker Control In JavaScript</h3>
<p>In the box given below, choose a time for your interview:</p>
<form action="/action_page.php">
  <label for="appt">Select a time:</label>
  <input id="appt-time" type="time" name="appt-time" value="12:00"><br>
  <input type="submit">
</form>
</body>
</html>

Or it can be written using JavaScript like,

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript Time Picker</title>     
   </head>
<body>
<h3>Time-Picker Control In JavaScript</h3>
<p>In the box given below, choose a time for your interview:</p>
<form action="/action_page.php">
  <label for="appt">Select a time:</label>
  <input id="appt-time" type="time" name="appt-time"></br>
  <input type="submit">
</form>
</body>
<script>
var defvalue = document.querySelector('input[type="time"]');
defvalue.value = '12:00';
</script>
</html>

Output:

JavaScript Time Picker Demo

How to return the value of <input = “time”>?

We can return the time chosen by the user or can store the value in a variable for future usage.

The value property in the <input> tag is used to return the value of the time field.

The value attribute can also be used to specify the time for the time field.

This value attribute is supported by mostly all the browsers like Google chrome, Microsoft Edge 10.0, Oracle, Safari etc. However, Firefox does not support this attribute.

Example:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Time Picker Example</title>
</head>
<body>


Time: <input type="time" id="viewTime" value="00:00:00">


<p>Select the button to get the time of the time field.</p>


<button onclick="myFunctiondemo()">View the Time</button>


<p id="content"></p>


<script>
function myFunctiondemo() {
  var x = document.getElementById("viewTime").value;
  document.getElementById("content").innerHTML = x;
}
</script>


</body>
</html>

Output:

JavaScript Time Picker Demo

We can select the time from the drop down as shown,

JavaScript Time Picker Demo

Then click on the “view the time” button, to see the time selected by the user,

JavaScript Time Picker Demo

Example:

To change the given time to new value.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Time Picker Example</title>
<head>
<body>


<p>You can now change the time in the time field, and then elect the button to get the new time.</p>


Select Time: <input type="time" id="viewTime" value="00:00:00">




<button type="button" onclick="myFunctiondemo()">View the time</button>
  
<p id="content"></p>


<script>
function myFunctiondemo() {
  var x = document.getElementById("viewTime");
  var initialVal = x.defaultValue;
  var newVal = x.value;
  
  if (initialVal == newVal) {
    document.getElementById("content").innerHTML = "Initial value and new value is the same: "
    + x.defaultlValue + " and " + x.value
    + "<br>Change the value of the time field to see the difference!";
  } else {
    document.getElementById("content").innerHTML = "The initial value was: " + initialVal
    + "<br>The new value given by the user is: " + newVal;
  }
}
</script>


</body>
</html>

Output:

Initially, the screen looks like this,

JavaScript Time Picker Demo

After changing the time,

JavaScript Time Picker Demo