时间戳

首页 > 解决方案 > 显示用户从日期输入中选择的日期

javascript - 显示用户从日期输入中选择的日期

问题描述

我要求用户从日历中选择开始日期和结束日期。我想在摘要页面中显示他们选择的日期。

例如：

您的开始日期：[用户从 DD MM YYY 的日历中选择的日期] 您的结束日期：[用户从 DD MM YYY 的日历中选择的日期]

我有什么办法可以做到这一点吗？

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>

标签： javascriptdate

解决方案

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>

推荐阅读