When users are required to enter a date, developers set the pre-defined/default value of an input type date to the current/today date. Now, the user does not need to enter the date manually so in that sense it saves time and effort for the user. Moreover, it enhances the user experience, accuracy of the data and provides more convenience for users. It has various applications such as an event management system, booking system, etc.
This blog demonstrates how to set the input type date’s default value to today:
- Using the “valueAsDate” Property
- Using the “toISOString()” Method
- Using the “getFullYear()” and “padStart()” Methods
Method 1: Using the “valueAsDate” Property
The “valueAsDate” property is utilized to retrieve the current date through the “Date()” function. This function is used to perform various operations on a date and like getting the current date, setting a specific date, manipulating dates, etc.
Visit the below code for a better understanding:
<div>
<label for="todayDate"> The Date is </label><input type="date"
id="todayDate">
</div>
<script>
document.getElementById("todayDate").valueAsDate = new Date();
</script>
</body>
In the above code snippet:
- First, the “<input>” tag is created having “type” and “id” attributes set to “data” and “todayDate” respectively. This “<input>” tag is going to be utilized throughout the blog.
- Next, inside the “<script>” tag the HTML element having an id of “todayDate” is selected using the “getElementById()” method.
- After that, the “valueAsDate” property is assigned and stored as an instance of a new “Date()” constructor.
After the execution of the above code snippet, the webpage looks like this:
The output shows that the input type data have a default value set to the current/today date.
Method 2: Using the “toISOString()” Method
For setting the default today value for the “input” element to today/current date. The “toISOString()” method can also be utilized, for a better explanation visit below code snippet:
const today = new Date().toISOString().substr(0, 10);
document.getElementById("todayDate").value = today;
</script>
In the above code snippet:
- First, the new instance of the “Date()” constructor is created. After that, convert the instance of the date to the “ISO” standard using the “toISOString()” method.
- Next, utilize the “substr()” method taking index numbers of “0” and “10” as a parameter. After that, it displays the result starting from the “0” index to the “10” index.
After the execution of the above method, the webpage appears like this:
The output shows that the input type data have a default value set to the current/today date.
Method 3: Using the “getFullYear()” and “padStart()” Methods
In this section, the “getFullYear()” method extracts the current date. The “padStart()” method is used which helps in formatting the “date” format that will be displayed on the targeted “input” element:
const current= new Date();
const current-year = current.getFullYear();
const current-month = String(current.getMonth() + 1).padStart(2, '0');
const current-day = String(current.getDate()).padStart(2, '0');
const formattedDate = `${current-year}-${current-month}-${current-day}`;
const myDateInput = document.getElementById('myDate');
myDateInput.value = formattedDate;
</script>
The description of the above code snippets is described in bullet points:
- First, create a constant type of variable that stores the object of the “Date()” constructor with the name “current”.
- Next, utilize the “getFullYear()” method with the “current” variable and store it in a new variable named “current-year”.
- Then, pass the “getMonth()” method and add one number to start the month from 1 to 12 inside the “String()” constructor. Also provide a padding of two characters by utilizing “padStart(2, 0)”. And place it in a newly created variable named “current-month”.
- Next, follow the same process to get the current date using the “getDate()” method and store it in the “current-day” variable.
After the execution of the code snippets, the webpage in each case appears like this:
The output shows that the input type data have a default value set to the current/today date.
Conclusion
To set the input type date default value to today/current date, the “valueAsDate” property, the “toISOString()” and “getFullYear()” methods can be utilized. In the case of the “valueAsDate” property, only the “Date()” constructor is needed while in the case of the “toISOString()” methods the “substr()” method is utilized to get only a specific part of the date. This blog demonstrates how to set the input type date default value to today/current.
