. Advertisement .
..3..
. Advertisement .
..4..
Don’t know how to set input type date in Javascript? You are at the right place! Check out this guide to discover all the steps and follow along.
How To Set Input Type Date In Javascript
The elements <input> of the type=“date” command can create the input fields that allows you to enter a specific date. Keep in mind that the output values are the day, month, and year, not time.
Setting the current date to the input type date is quite simple. You just need to follow these steps:
- Choose an input field.
- Utilize the property value to set your current date to the input field.
- Use the format YYYY-MM-DD for the current date. (YYYY indicates year, MM is month, and DD for day)
Let’s take the following HTML as an example.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
</head>
<body>
<div class="col">
<label for="date">Date</label>
<input type="date" class="form-control" id="date"
name="date">
</div>
<script src="app.js"></script>
</body>
</html>
Or, you can use the getDate() function in JavaScript to set input type date. Here is a sample.
function getDate() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
}
if(mm<10) {
mm = '0'+mm
}
today = yyyy + '/' + mm + '/' + dd;
console.log(today);
document.getElementById("date").value = today;
}
window.onload = function() {
getDate();
};
Utilizing the method getElementById(), we chose the element of the date input type. The property value allows us to change the value of the element.
Keep in mind that the date must be formatted as YYYY-MM-DD when you set the value of the element.
You can also set the input’s value with the following formats:
- time is hh:mm
- date is YYYY-MM-DD
Below is an example.
var date = new Date();
var currentDate = date.toISOString().substring(0,10);
var currentTime = date.toISOString().substring(11,16);
document.getElementById('currentDate').value = currentDate; document.getElementById('currentTime').value = currentTime;
Another method to get and set the value of date in the JavaScript programming language is with the value HTMLInputElement and property valueAsNumber.
Observe the following example to better understand.
const dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2022-08-10';
console.log(dateControl.value); // prints "2022-08-10"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
As you can see, the code above finds the element <input> and returns the value date to 2022-08-10 (August 8th, 2022).
Notice that the format of the displayed date value depends on your browser’s locale. Still, your parsed value date will always be in the YYYY-MM-DD format.
The Bottom Line
Above is the tutorial for setting input type date in Javascript. Follow it now to complete this task. Suppose you also want to subtract dates in javascript; check out this guide.
Leave a comment