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 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 radio button checked value

What are radio buttons? A radio button is defined as an icon that is used to take input from the user. The user can choose only one option(value) from the group...

5 minutes read.

Javascript Email Validation

We can validate the email with the help of JavaScript. Here we check the condition related to any email id, like email it must have "@" and "." sign and...

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

D3.js Tutorial

Introduction of D3.js D3.js is referred to as a JavaScript library that is used to manipulate the documents according to the data. The intensity of D3 is based on web standards...

5 minutes read.

Javascript Window Object

The window object represents a window in browser. An object of window is created automatically by the browser. Window is the object of browser, it is not the object of JavaScript. The...

3 minutes read.

Javascript Document Object

Document object represents the whole HTML documents. When HTML document is loaded in browser it becomes the document object. It is the root elements that represent the HTML documents. With the help of...

2 minutes read.

Javascript String

String object works with series of characters. It is used to store and manipulate text. There are two ways to create string in JavaScript: String literal. Using new keyword. String literal By using double quotes...

4 minutes read.

JavaScript redirect URL with parameters

Data can be often passed between web pages as information in URL parameters or query strings. A URL (Uniform Resource Locator) can have a single parameter or multiple parameters.Parameters can...

4 minutes read.

Javascript Password Validation

Here we see that how to validate any password field. Like password field can be blank and length of password is minimum 8 characters. Example <!DOCTYPE html>   <html>   <head>   <script>   functionpass_validation()   {     var password=document.myform.password.value;     if (password==null || password=="")   {     alert("password can't be blank");     return false;     }   else if(password.length<8)   {     alert("Password must be at least 8 characters long.");     return false;       }     }     </script>   </head>   <body>   <form name="myform" method="post" action="register.php" onsubmit="return pass_validation()" >   Password: <input type="password" name="password">   <input type="submit" value="submit">   </form>   </body>   </html> Try Now ← Prev Next → ...

1 minute read.

Javascript getElementByID

The document.getElementById() method returns the element of specified id. In below example we receive input field by using document.getElementById() method, here document.getElementById() receive input value on the basis of input field...

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 Operators

The concept of operators is the basis of nearly all programming languages used in today's computing systems. Operators facilitate the execution of certain functions. For instance, the (+) symbol is...

8 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 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 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 Math

Math is build-in object that has properties and methods for mathematical constants and functions. It allows you to perform mathematical tasks on numbers. Syntax varpi_val = Math.PI; varsin_val = Math.sin(30); Examples Math.pow() Math.pow(x,y) returns the value of x to the power...

2 minutes read.

Javascript Example

What is JavaScript? JavaScript is a highly versatile programming language. It provides the capability to add interactivity to static web pages, which are designed with HTML and CSS. It also provides...

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.