Displaying the Dates that user have chosen from date input

Question

I am asking users to select a Start Date and End Date from the calendar. I want to display the dates they have picked in a summary page.

For Example:

Your Start Date : [Date User has picked from Calendar in DD MM YYY] Your End Date : [Date User has picked from Calendar in DD MM YYY]

Is there any way for me to do this?

function calculateDate() {
  var startDate = document.getElementById("startDate").value;
  var endDate = document.getElementById("endDate").value;
  var dvtextless60 = document.getElementById("dvtextless60");
  var dvtext61182 = document.getElementById("dvtext61182");
  var dvtextmore183 = document.getElementById("dvtextmore183");
  var Difference_In_Time = new Date(endDate).getTime() - new Date(startDate).getTime();
  var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);

  if (Difference_In_Days < 60){
    document.getElementById("dvtextless60").style.display = "block";
  } else if (Difference_In_Days > 60 && Difference_In_Days <= 182){
    document.getElementById("dvtext61182").style.display = "block";
  } else {
    document.getElementById("dvtextmore183").style.display = "block";
  }
  
  document.getElementById("numofdays").innerHTML = Difference_In_Days;  
  document.getElementById("displaysummary").innerHTML = startDate;
}

function resetForm(){
  document.getElementById('rCalculator').reset();
  location.reload();
}

<body>
<form id="rCalculator">
<pre>
Enter Start Date: <input type="date" name="startDate" id="startDate"/><br>

Enter End Date: <input type="date" name="endDate" id="endDate"/><br>

Total Days : <span id="numofdays"></span>

<span id="displaysummary"></span>

<div id="dvtextless60" style="display:none"> 
<span style="font-size:18px"><b>Too Short</b></span>
<br>

</div>

<div id="dvtext61182" style="display:none"> 
<span style="font-size:18px"><b>Almost There</b></span>

</div>

<div id="dvtextmore183" style="display:none"> 
<span style="font-size:18px"><b>Too Long</b></span>

</div>


<button type="button" id="calculate" onclick="calculateDate();">Calculate</button>   <button type="button" id="startover" onclick="resetForm();">Reset</button> 

</pre>
</form>
</body>

Do you want to display total days or want to display the dates in a new day? — Nikita, May 28 '21 at 05:17
Does this answer your question? [How to get current formatted date dd/mm/yyyy in Javascript and append it to an input](https://stackoverflow.com/questions/12409299/how-to-get-current-formatted-date-dd-mm-yyyy-in-javascript-and-append-it-to-an-i) — kmoser, May 28 '21 at 06:18

score 0 · Accepted Answer · answered May 28 '21 at 07:04

function calculateDate() {
  var startDate = document.getElementById("startDate").value;
  var endDate = document.getElementById("endDate").value;
  var dvtextless60 = document.getElementById("dvtextless60");
  var dvtext61182 = document.getElementById("dvtext61182");
  var dvtextmore183 = document.getElementById("dvtextmore183");
  var Difference_In_Time = new Date(endDate).getTime() - new Date(startDate).getTime();
  var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);

  if (Difference_In_Days < 60){
    document.getElementById("dvtextless60").style.display = "block";
  } else if (Difference_In_Days > 60 && Difference_In_Days <= 182){
    document.getElementById("dvtext61182").style.display = "block";
  } else {
    document.getElementById("dvtextmore183").style.display = "block";
  }
  
  document.getElementById("numofdays").innerHTML = Difference_In_Days;  
  document.getElementById("displaysummary").innerHTML ="Your Start Date :" + getFormattedDate(startDate) + "<br>Your End Date   :" + getFormattedDate(endDate);
}

function resetForm(){
  document.getElementById('rCalculator').reset();
  location.reload();
}

function getFormattedDate(d){
  return d.substr(8,2) + " " + d.substr(5,2) + " " + d.substr(0,4)
}

<body>
<form id="rCalculator">
<pre>
Enter Start Date: <input type="date" name="startDate" id="startDate"/><br>

Enter End Date: <input type="date" name="endDate" id="endDate"/><br>

Total Days : <span id="numofdays"></span>

<span id="displaysummary"></span>

<div id="dvtextless60" style="display:none"> 
<span style="font-size:18px"><b>Too Short</b></span>
<br>

</div>

<div id="dvtext61182" style="display:none"> 
<span style="font-size:18px"><b>Almost There</b></span>

</div>

<div id="dvtextmore183" style="display:none"> 
<span style="font-size:18px"><b>Too Long</b></span>

</div>


<button type="button" id="calculate" onclick="calculateDate();">Calculate</button>   <button type="button" id="startover" onclick="resetForm();">Reset</button> 

</pre>
</form>
</body>

Displaying the Dates that user have chosen from date input

1 Answers1