Question

我想在HTML中使用日期时间字段，如下所示。但是，我想使用该值来检查日期是今天还是将来的日期，而不是过去的日期。

我检查过有些类似主题的其他问题，但他们并没有真正帮助。有没有办法可以从日期时间字段中提取日期，因为当我们使用字段的值时，我们会得到对我没有任何意义的数字和字母。

<html>
<script type="text/javascript">
function checknum() 
{
var num_ch=document.forms["bookticketpage"]["childrens"].value;
var num_tk=document.forms["bookticketpage"]["tickets"].value;
if(num_ch > num_tk)
{
alert("No of tickets should be greater than the no of children");
}
}
function calcfare()
{
var tick = document.forms["bookticketpage"]["tickets"].value;
var ch=document.forms["bookticketpage"]["childrens"].value;
var total = (tick-ch)*200 + ch*100;
alert("Your approximate ticket amount is " + total + " INR");
}
</script>
<body>
<style type="text/css" >
.item img { 
height: 200px; 
width: 200px; 
-webkit-transition: all 2s ease; 
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease; } 
.item img:hover 
{
width: 300px; 
height: 300px;
}
</style>
<form name="bookticketpage" action="thankyou.html" method="post">
<div>
<h2><b>Movie Ticket Booking</b></h2>
<table>
<!------------------------------------------------------------------>
<tr>
<td>
<label for="username">Name</label>
</td>
<td>
<input type="text" name="username" placeholder="Enter the name" size="20" 
required pattern="[a-zA-Z\s]+">
</td>
</tr>
<!------------------------------------------------------------------>
<tr>
<td>
<label for="moviename">Movie Name</label>
</td>
<td>
<datalist id="movies">
    <option value="Irada"></option>
    <option value="Rangoon"></option>
    <option value="Logan"></option>
    <option value="Fist Fight"></option>
</datalist>
<input list="movies" name="moviename" size="20" required="true"/>
</td>
</tr>
<!------------------------------------------------------------------> 
<tr>
<td>
<label for="circle">Circle</label>
</td>
<td>
<datalist id="circles">
    <option value="Silver"></option>
    <option value="Gold"></option>
    <option value="Platinum"></option>
</datalist>
<input list="circles" name="circle" size="20" required="true"/>
</td>
</tr>
<tr>
<td>
<label for="phone">Phone no</label>
</td>
<td>
<input type="tel" name="phone" placeholder="Enter Mobile # here" required 
pattern="[1-9]{1}[0-9]{9}" >
</td>
</tr>
<tr>
<td>
<label for="showdate">Show date and time</label>
</td>
<td>
<input type = "datetime-local" name="showdate required="true"">
</td>
</tr>
<tr>
<td>
<label for="tickets">No of tickets</label>
</td>
<td>
<input type="text" name="tickets" size="20" min="1" max="10" 
required="true">
</td>
</tr>
<tr>
<td>
<label for="childrens">No of childrens</label>
</td>
<td>
<input type="text" name="childrens" size="20" min="1" max="5" 
required="true">
</td>
</tr>
<!------------------------------------------------------------------->
<tr>
<td>
<label for="Book My Show"><input type = "submit" value ="Book My Show" 
onClick="checknum(); calcfare();"/></label>
</td>
<td>
<label for="reset"><input type="reset" value="Reset"/></label>
</td>
</tr>
</table>
<div class="item">
<img src="contactus.jpg" width="254" height="54">

<div class="item-overlay top"></div>
</div>
</div>
</form>
</body>
</html>

Answer 1

试试这个：

function myFunction(){
  var inputDate = new Date(document.getElementById("bookingday").value);
  var date = new Date();
  if(inputDate < date){
     alert("Please enter valid date");
  }else{
    alert("Valid date. Thank you");
  }
}

Enter a booking date:<br>
<input type="datetime-local" id="bookingday"><br>
<button onclick="myFunction()">Click me</button>

Answer 2

＆＃13;

function setMinDate() {
  var dateInput = document.getElementById('date');
  var str = new Date().toISOString();
  console.log(str);
  str = str.substring(0, str.length - 1);
  dateInput.setAttribute('min', str);
  console.log(dateInput);
  
}
setMinDate();

＆＃13;

<form>
    <label for="party">DATE:</label>
    <input id="date"  type="datetime-local" name="partydate" >
  </form>

＆＃13;

您可以将min属性设置为输入标记 <input type="datetime-local" id="date" name="showdate" required=" true " />

Javascript函数检查在“datetime”表单字段中输入的日期是否不是过去的日期，只有今天或某个未来的日期

2 个答案: