I'm unable to find a previous date by inputing a given date by a user using html and javascript. Can you please help me out
Question
'This is the HTML Code'
<form>
<div class="input-field">
<label>Choose Date</label>
<input type="date" id="date" onchange="myDate();" required>
</div>
<div class="input-fields">
<label>Previous Date</label>
<input type="date" id="previous" readonly>
</div>
</form>
'This is the Javascript Code'
<script>
function myDate()
{
const currDate = document.getElementById("date");
const date = new Date(currDate)
if (typeof date === 'object' && date !== null && 'getDate' in date) {
console.log("The data type is", typeof date)
console.log(date.getDate())}
else {
console.log("Invalid Date Object")
}
date.setDate(date.getDate()-1);
const previous = document.write(date);
document.getElementById("previous").value = previous;
}
</script>
I'm trying to get previous date by using the myDate Function in Javascript and i was getting an error getDate is not a function then i tried to make getDate as function and now its showing the same error. I'm not able to make a getDate as function or getting previous date value
2 answers
solution1
0 2022-07-10 09:07:11
Here is the solution for you.
First problem that you had is that you got the element in currDate instead of the value.
After that, I don't understand what you were trying to do on your previous variable but you where overwriting the actual DOM with the updated date.
Last, you have to convert the date that you want to set on the other field to the accepted string, so you need to truncate the toISOString() method to return the date in format of YYYY-MM-DD (since that is how you read if from the initial input).
function myDate()
{
const currDate = document.getElementById("date").value;
const date = new Date(currDate)
if (typeof date === 'object' && date !== null && 'getDate' in date) {
console.log("The data type is", typeof date)
console.log(date.getDate())}
else {
console.log("Invalid Date Object")
}
date.setDate(date.getDate()-1);
document.getElementById("previous").value = date.toISOString().split('T')[0];
}
solution2
0 ACCPTED 2022-07-10 09:12:41
the problem is with new Date(currDate) this here you create new date with element so you need to do new Date(currDate.value) then you need to format date according to what date picker accept yyyy-MM-DD .
function myDate() { const currDate = document.getElementById("date"); const date = new Date(currDate.value) if (typeof date === 'object' && date !== null && 'getDate' in date) { console.log("The data type is", typeof date) console.log(date.getDate()) } else { console.log("Invalid Date Object") } date.setDate(date.getDate() - 1); document.getElementById("previous").value = formateDate(date); } function formateDate(d) { return d.getFullYear() + '-' + ("0" + (d.getMonth() + 1)).slice(-2) + '-' + ("0" + d.getDate()).slice(-2) ; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <form> <div class="input-field"> <label>Choose Date</label> <input type="date" id="date" onchange="myDate();" required> </div> <div class="input-fields"> <label>Previous Date</label> <input type="date" id="previous"> </div> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.