如何在选择将来的日期时禁用HTML日期输入类型？

Question

I have a code and just last year, it was still working. What it does is that it disables user to pick future dates. Now that it's January, it doesn't seem to be working. I do not understand why. Please help me fix this. Your help will be appreciated.

This is the input:

<input id="reqDate" class="form-control col-md-7 col-xs-12" name="reqDate" required="required" type="date">

Javascript:

<script type="text/javascript">
          var input = document.getElementById("reqDate");
          var today = new Date();
          var day = today.getDate();

          // Set month to string to add leading 0
          var mon = new String(today.getMonth()+1); //January is 0!
          var yr = today.getFullYear();

            if(mon.length < 2) { mon = "0" + mon; }

            var date = new String( yr + '-' + mon + '-' + day );

          input.disabled = false; 
          input.setAttribute('max', date);
</script>

By the way, I am using this code in a .php file.

Answer 1

Like you have used, the native input[type="date"] element supports a maximum date value:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
http://www.w3schools.com/tags/att_input_max.asp

The JavaScript you are using to set the date does not zero-pad the day, so for the first of January, you would get the date max="2016-01-1". To keep with your JavaScript version, sero pad the date with:

<script>
      var input = document.getElementById("reqDate");
      var today = new Date();
      var day = today.getDate();

      // Set month to string to add leading 0
      var mon = new String(today.getMonth()+1); //January is 0!
      var yr = today.getFullYear();

        if(mon.length < 2) { mon = "0" + mon; }
        if(day.length < 2) { dayn = "0" + day; }

        var date = new String( yr + '-' + mon + '-' + day );

      input.disabled = false; 
      input.setAttribute('max', date);
</script>

With this being a PHP script, to simplify your code you could use:

<input type="date" name="bday" max="<?=date('Y-m-d')?>">

NB Support for input[type="date"] varies between browsers (see http://caniuse.com/#feat=input-datetime ).

You can confirm the max value used is in the correct supported RCF3339 format by inspecting the element in the browser inspector.

Answer 2

Did you try using min attribute in the input. In html5 we can specify min or max attributres in proper date format YYYY-MM-DD