Question

我需要为最小限制添加什么，以确保结帐日期的用户输入是在用户输入签入日期之后？

＆＃13;

<form>
  Enter Check-In Date:<br>
  <input type="date" name="checkin"><br>
  
  Enter Check-Out Date:<br>
  <input type="date" name="checkout"><br>
</form>

＆＃13;

这可以仅使用HTML5完成，还是需要包含javascript？

Answer 1

java脚本需要验证。比较check in日期少于check out日期

＆＃13;

function check() {
  if(document.getElementById('checkin').value < document.getElementById('checkout').value)
    { console.log('ok')}
  else{
    console.log('Not allowed')
    }
  
  }

＆＃13;

<form>
      Enter Check-In Date:<br>
      <input type="date" id="checkin" name="checkin"><br>
      Enter Check-Out Date:<br>
      <input type="date" id="checkout" name="checkout" onchange="check()"><br>
    </form>

＆＃13;

Answer 2

您可以使用HTML5输入日期的最小和最大属性

<form>
  Enter Check-In Date:<br>
  <input type="date" name="checkin" max="2016-11-06"><br>

  Enter Check-Out Date:<br>
  <input type="date" name="checkout" min="2016-11-07"><br>
</form>

其中最大日期为＆＃34; checkin＆＃34;小于＆＃34;结帐＆＃34;的最小日期。

或者尝试在javascript中验证。

Answer 3

＆＃13;

document.getElementById("2").disabled = true;
$("#1").on("change paste keyup", function() {
   console.log($(this).val()); 
  var testDate= $(this).val();
  var date_regex = /^\d{4}-\d{2}-\d{2}$/;
  if((date_regex.test(testDate)))
   document.getElementById("2").disabled = false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Enter Check-In Date:<br>
  <input type="date" name="checkin" id="1"><br>
  
  Enter Check-Out Date:<br>
  <input type="date" name="checkout" id="2"><br>
</form>

＆＃13;

如何将datepicker的HTML5 Form min限制设置为＆＃34; Check-In Date（用户输入）＆＃34;

3 个答案: