How To Set Current Date On Input type= “date” Using JavaScript

You can make your own function to set the current date on an input type = “date” or use the external library or built-in functions in JavaScript. Learn more about it with the explanation and examples below.

Set date on an input date type using JavaScript

When filling out a date input field in a browser, the browser leaves the field empty unless a default date is provided in the value attribute. As a result, you must explicitly provide the date in RFC3339 format (YYYY-MM-DD) to specify the date for the date field.

Explanation of components:

For example: “2022-09-02” means September 2nd, 2022 (02/09/2022).

In a date field, to assign the date to variable x:

var theDate = document.getElementById("theDate").value;

To change the date of the date field to 10/09/2022:

document.getElementById("theDate").value = "2022-09-10";

Set the current Date on an Input type= “date” in JavaScript

As we have introduced, you must provide the date in RFC3339 format (YYYY-MM-DD) to specify the date for the date field. Hence if you don’t provide the correct  YYYY-MM-DD format, Strings such as ‘2018/01/02’ or ‘01-02-2018’ will cause errors or be misled and you will not get the correct date.

Unfortunately, HTML5 doesn’t provide a way to specify ‘today’ in the HTMLInputElement.prototype.value. But we can implement it by using some lines of code to convert the current day to the RFC3339 format (YYYY-MM-DD) and change the input date object value to that formatted string. Here we are showing you 3 different ways to set the current date on an input type = “date”:

Create your own function:

function currentDate(){
    var date = new Date();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();
    var day = date.getDate();

    if (day < 10) day = "0" + day;

    if (month < 10) month = "0" + month;

    var today = year + "-" + month + "-" + day;   	
    return today;
}

This function will return the formatted RFC3339 string representing the current date. Now we need to set that string to the input date object we want (in this case we choose the object with id = “myDate”)

var x = document.getElementById("myDate");
x.setAttribute("value", currentDate())

Output:

Below is the approach using our own function. Alternatively, you can use another method:

Use momment.js (a free javascript library)

All you have to do first is to import the library to the script tag of your document. 

<script src="https://momentjs.com/downloads/moment.js"> </script>

Now you can easily use the library to set the current date to the correct format by using the moment() method and format it using format() method:

Syntax:

moment().format(String)

Parameter:

• String: This function accepts a single parameter of string type, which defines the format and returns the date.

var x = document.getElementById("myDate");
let currentdate = moment().format('YYYY-MM-DD');

x.setAttribute("value", currentdate);

Output:

Below is the approach using an external library. However, if you don’t want to use the library, there is also an another way you can implement it:

3. Using toLocaleDateString(locales) method:

The toLocaleDateString(locales) method returns a string with a language-sensitive representation of the date portion of the specified date in the user agent’s timezone. You don’t need to import any external library.

Syntax:

toLocaleDateString(locales)

Parameter:

• locales: A string corresponding to the locales parameter of the Date(). If this parameter is not provided then the locale of the host will be used.

For instance, you can use the following code to set the current Date on an Input type=”date”

var x = document.getElementById("myDate");
const currentDate = new Date();
const formatted = currentDate.toLocaleDateString('en-CA');

x.setAttribute("value", formatted);

Output:

Summary

The above approaches will help you with converting the current date to the correct format and set it on the input type = “date” element. Each method has its own pros and cons. If you just care about the quickest way then the third approach should be taken into your consideration.

Maybe you are interested:

• Convert a dd/mm/yyyy string to a Date in JavaScript
• Get yesterday’s Date formatted as YYYY-MM-DD in JavaScript
• Get the Sunday of the Current Week using JavaScript

Edward Anderson

I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.

---

Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R