I'm unable to find a previous date by inputing a given date by a user using html and javascript-CodePudding

'This is the HTML Code'

<form>
  <div >
    <label>Choose Date</label>
    <input type="date" id="date" onchange="myDate();" required>
  </div>
  <div >
    <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

CodePudding user response：

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 >
      <label>Choose Date</label>
      <input type="date" id="date" onchange="myDate();" required>
    </div>
    <div >
      <label>Previous Date</label>
      <input type="date" id="previous">
    </div>
  </form>
</body>
</html>

CodePudding user response：

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];
}