Logo
×

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

Related Topics

Javascript Date

In JavaScript Date Object is data type build into the JavaScript language. Data object are created with the new Date(). JavaScript Date instance that represents a single moment in time. JavaScript...

2 minutes read.

JavaScript setInterval()

On the Window and Worker interfaces, the setInterval() method calls a function or executes a snippet with a specified time delay between each call. This function provides an interval ID that...

4 minutes read.

Javascript comment

Introduction In programming languages, comments are a method to include meaningful annotations within the code that the compiler or interpreter will ignore at run time. That is to say, though comments...

7 minutes read.

JavaScript Function

An important part of JavaScript is the ability to create new functions within <script>.....</script> tag. To declare a function in JavaScript using function keyword. We call JavaScript function multiple times to reuse the...

3 minutes read.

Javascript Event

Events are things that happen, usually user action, that are associated with an object. All object have properties and methods. Some objects also have events. The event handler is a command that is...

1 minute read.

JavaScript focus on input

In JavaScript, the elements can be focused using either focus() method or onfocus() event. What is focus() method? When we want to focus on an element (if it can be focused) or...

4 minutes read.

Javascript Print

JavaScript help's the functionality using the print function of window object. In JavaScript print function window.print() print the current web page when it executed. We can call function directly using onclick...

1 minute read.

Javascript Variable

Variables are used to store values (name="Ram") or expressions (Sum=x+y). Before using of variable first we need to declare it. We use keyword var to declare a variable like this: var name; There are two types of variables: Local Variable ...

1 minute read.

Javascript If Else

Introduction The if-else statement is an important control structure for decision-making in code based on some conditions. It gives programmers the ability to add decision-making functionality into their programs. Using if-else,...

6 minutes read.

Javascript input maxlength

Various attributes often accompany the input tag in HTML to change the properties of the input field. Maxlength() is one such attribute. The maxLength attribute defines the maximum number of characters...

2 minutes read.

Javascript loops

Loops in JavaScript: Loops are used to execute a specific piece or block of code repeatedly until the given condition is satisfied. What is a Loop? Almost all loops contain a certain...

7 minutes read.

Javascript Data Types

An Overview of JavaScript Data Types In computing, there are a number of data types, including numbers, strings, and booleans, to name a few. The role of these data types in...

5 minutes read.

Javascript Tutorial

JavaScript is a light-weight, dynamic scripting language that is mainly employed to create interactive front-end web applications. It was originally developed in 1995 by Brendan Eich at Netscape Communications Corporation...

5 minutes read.

Javascript Number

The Number object is a wrapper object which allows you to work with numerical values. The number object is created using the Number() constructor.It may be integer or floating-point. Syntax var n=new Number(value); Examples <!DOCTYPE html>   <html>   <body>   <script>   var x=100;//integer value   var y=100.7;//floating point value   var z=12e5;//exponent value, output: 1200000   var n=new Number(20);//integer value by number object     document.write(x+" "+y+" "+z+" "+n);   </script>   </body>   </html> Try Now Output 100 100.7 1200000 20 Description The primary...

1 minute read.

Javascript Cookies

Cookie is a piece of data which is sent from a website and stored locally by the user's browser. Cookie is needed because HTTP is stateless protocol. Today most of...

1 minute read.

JavaScript dropdown onchange

What is onchange event? It is an event in JavaScript used to make the web pages dynamic. The onchange event gets triggered whenever the value of an event changes. It usually...

3 minutes read.

Javascript Switch Statement

Introduction Conditional statements are simple building blocks in programming languages and are utilized fairly frequently. This portion of Developing Conditional Statements in JavaScript talks about how to utilize the if, else,...

5 minutes read.

Callback and Callback Hell in JavaScript

The widely used client-side programming language JavaScript is simple, light, and interpretive. JavaScript is used by the majority of client-side web applications. It is also possible to use JavaScript on...

3 minutes read.

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...

5 minutes read.

JavaScript setTimeout()

The setTimeout() method creates a timer that, when it expires, runs a function or provides a piece of code. setTimeout() is an asynchronous function, which means that it will not interrupt...

3 minutes read.