Categories
JavaScript Answers

How to Set the Date Value of a Date Input with JavaScript?

Spread the love

Sometimes, we want to set the date value of a date input with JavaScript.

In this article, we’ll look at how to set the date value of a date input with JavaScript.

Set the Date Value of a Date Input with JavaScript

To set the date value of a date input with JavaScript, we create a date string in YYYY-MM-DD format, then we set the value property of the input to that date string.

For instance, if we have the following date input:

<input type='date'>

Then we write:

const input = document.querySelector('input')  
const dt = new Date(2021, 1, 1);  
const day = ("0" + dt.getDate()).slice(-2);  
const month = ("0" + (dt.getMonth() + 1)).slice(-2);  
const date = dt.getFullYear() + "-" + month + "-" + day;  
input.value = date

We get the input with document.querySelector .

Then we create the dt date with the Date constructor.

Next, we get the day and month with the getDate and getMonth methods respectively.

And we pad them both with a 0 before it and call slice with -2 to get the last 2 digits.

Next, we create the date string by concatenating the year, which we get from getFullYear , month and day joined together with dashes.

Finally, we set date to input.value .

Now we should see the date input set with the value of the date.

Conclusion

To set the date value of a date input with JavaScript, we create a date string in YYYY-MM-DD format, then we set the value property of the input to that date string.

Leave a Reply

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