如果输入日期大于今天，则会引发错误

Question

I am having an input date field in my php/html page. In my date field i need to throw an error if the input date is greater than today (sysdate). Is it possible? if so please help. Here is my html script of input field. Another JavaScript is also working based on the input date to the field to identify the due date automatically.

<div class="form-group">
<div class="input-group col-sm-4">
<div class="input-group-addon">Transaction Date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-calendar"></i></div>
<input id ="txndt" class="form-control" type="date" name ="purch_date" onblur = "txn40();" required />
</div>
</div>

Answer 1

It worked with java script also. I have called a java script from my 'form'. Here is the solution.It is working as expected by me.

Form

<form  name="purchase" id ="purchase" method="post" action="" onsubmit="return checkform()">
    <div class="form-group">
        <div class="input-group col-sm-4">
            <div class="input-group-addon">Transaction Date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-calendar"></i></div>
                <input id ="txndt" class="form-control" type="date" max="<?php echo date("Y-m-d")?>" name ="purch_date" value="<?php echo $query2['purch_date'] ?>" onblur = "txn40();" required />
        </div>
    </div>
</form>

Java Script

<script type="text/javascript">
    function checkform()
    {
    var dateString = document.purchase.txndt.value;
    var myDate = new Date(dateString);
    var today = new Date();
         if (document.purchase.txndt.value == "")
          { 
          //something is wrong
          alert('REQUIRED FIELD ERROR: Please enter date in field!')
          return false;
          }
          else if (myDate>today)
          { 
          //something else is wrong
            alert('You cannot enter a date in the future!')
            return false;
          }
          // if script gets this far through all of your fields
          // without problems, it's ok and you can submit the form
          return true;
    }
</script>

Thanks to all for support.

Answer 2

You can compare the valueAsDate property against the current date.

document.querySelector('#txndt').onchange = function() {
    if (this.valueAsDate > new Date) {
        alert("You can't pick a future date!")
    }
};

Answer 3

Worked with 'max' function and 'php'. Working fine in chorome browser (HTML 5 supported browser). Changed the input with the below one.

<input id ="txndt" class="form-control" type="date" max="<?php echo date("Y-m-d")?>" name ="purch_date" onblur = "txn40();" required />