Yogesh Chauhan's Blog

How to add Date and Time picker in HTML and get the values using JavaScript?

in HTML & JavaScript on March 14, 2021

We can use simple HTML input tags to add a date picker and time picker.

datepicker

input elements with type=”date” creates datepicker input fields.

User can enter a date by just writing it down in the textbox or using a datepicker interface. You can add a range using min and max attributes to force users to select the date in that specific range. You can also add a default date using the attribute value.

Note that the user interface of datepicker will be different on different browsers. If any browser doesn’t support the datepicker then the field will be converted to an input text field.

The date picker doesn’t contain time picker in it. You will only get to select a year, a month, and a day using the date picker.

This is how to add datepicker using HTML



<input type="date" 
       id="datePicker" name="datePicker"
       value="2021-03-22"
       min="2001-01-01" max="2099-12-31">


This is how to get datepicker value using JavaScript

We need to use ID of the datepicker element in order to get the value.

The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user’s browser, but the parsed value is always formatted yyyy-mm-dd. – from MDN


console.log(document.getElementById("datePicker").value);
//2021-03-22

This is how to set datepicker value using JavaScript

Same way, we need to use ID of the datepicker element in order to get the value.


document.getElementById("datePicker").value = "2022-03-22";
;
console.log(document.getElementById("datePicker").value);
//2022-03-22

timepicker

input elements with type=”time” creates timepicker input fields.

User can enter a time by just writing it down in the textbox or using a timepicker interface. You can add a range using min and max attributes to force users to select the time in that specific range. You can also add a default time using the attribute value.

Note that the user interface of timepicker will be different on different browsers just as datepicker. If any browser doesn’t support the timepicker then the field will be converted to an input text field.

This is how to add timepicker using HTML



<input type="time" 
       id="timePicker" name="timePicker"
       value="21:00"
       min="09:00" max="21:00" required>


This is how to get timepicker value using JavaScript

We need to use ID of the timepicker element in order to get the value.


console.log(document.getElementById("timePicker").value);
//21:00

This is how to set timepicker value using JavaScript

Same way, we need to use ID of the timepicker element in order to get the value.


document.getElementById("timePicker").value = "09:00";
;
console.log(document.getElementById("timePicker").value);
//9:00

Credit: input date on MDN and input time on MDN


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Some EASY-to-Understand CSS media query examplesCSSOOP, Class and Objects Strategies For Beginners (PHP)PHPCanvas Drawing in HTML5HTMLWhat is Hadoop and Hadoop Ecosystem?MiscellaneousHow to replace HTML lists using CSS Counters?CSSIs there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQL