How To Set The Values Of Input Type Date And Time Using JavaScript?

Posted on by Cora Lopez
Set the Values of Input type Date and Time using JavaScript

Input date and input time are commonly used for registration forms. If you need to set the values of Input type Date and Time using JavaScript for your website, read this article, we will show you the simplest ways to do it.

Set the values of input type Date and Time using JavaScript?

Before we start setting input date and time values, let’s quickly look at their concepts.

Input type date: generates input fields that allow the user to enter a date. Its value includes the day, month, and year but not the time.

Input type time: generates input fields that allow the user to enter a time (hours, minutes). Its value includes only the time, not the date.

Now, let’s set the values for them.

Using the value attribute

Any input tag has a value attribute, so we can use this attribute to set the value for the input Date and input Time.

First, we need to get the input Date and input Time tags. Then call the value attribute on each tag and set the value for them. We can either hard set a value or set the current time value using the Date() constructor. Note that the format accepted in these two input tags must have a ‘0’ in front of numbers less than 10.

See the example below to understand better.

<main id="app">
  <h1>Hello, this is LearnShareIT</h1>
  <form id="my-form">
    <div>
      Date:
      <input type="date" id="date-input" />
    </div>
    <div>
      Time:
      <input type="time" id="time-input" />
    </div>
  </form>
</main>
<script type="module" src="script.js"></script>
// Get input Date and input Time
const dateInput = document.getElementById('date-input');
const timeInput = document.getElementById('time-input');

// Get the current date
let now = new Date();
let date = now.getDate();
let month = now.getMonth();
let year = now.getFullYear();

// Format dates and months < 10
if (date < 10) date = '0' + date;
if (month < 10) month = '0' + month;

// Get the current time
let hour = now.getHours();
let min = now.getMinutes();

// Format hours and minutes < 10
if (hour < 10) hour = '0' + hour;
if (min < 10) min = '0' + min;

// Set value for input Date and input Time using the value attribute
dateInput.value = `${year}-${month}-${date}`; // 'YYYY-MM-DD'
timeInput.value = `${hour}:${min}`; // 'HH:MM'

Output:

Using the setAttribute() function

You can read more about the syntax of setAttribute() here before we start coding.

In addition to directly setting the value attribute of the input tag, we can also use the setAttribute() function to indirectly set the value for the input Date and input Time. Just pass the string ‘value’ into the first argument and the date value or time value on the 2nd argument.

This time let’s gather the code to get the current date and format the date into a function for reuse. Then use setAttribute() to set the value for the input Date and input Time.

// Get input Date and input Time
const dateInput = document.getElementById('date-input');
const timeInput = document.getElementById('time-input');

// Generate a formatted date and time object.
function createFormattedCurrentDatetime() {
	// Get the current date
	let now = new Date();
	let date = now.getDate();
	let month = now.getMonth();
	let year = now.getFullYear();

	// Format date and month < 10
	if (date < 10) date = '0' + date;
	if (month < 10) month = '0' + month;

	// Get the current time
	let hour = now.getHours();
	let min = now.getMinutes();

	// Format hours and minutes < 10
	if (hour < 10) hour = '0' + hour;
	if (min < 10) min = '0' + min;

	return {
		date: `${year}-${month}-${date}`,
		time: `${hour}:${min}`
	};
}

// Set value for input Date and input Time using setAttribute()
let date = createFormattedCurrentDatetime().date;
dateInput.setAttribute('value', date);
let time = createFormattedCurrentDatetime().time;
timeInput.setAttribute('value', time);

Output:

Summary

Above, we have shown you two ways that are considered best practices to set the values of input type Date and Time using JavaScript. You don’t have to use both ways. Just choose the one that works best for you. If you have any questions, please comment below.

Have a nice day!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *