Restrict future dates in HTML5 date input

Question

I want to restrict a user to only being able to add future dates in a HTML date input.

Instead of jQuery UI date picker I want to add HTML5 calender. Can anyone tell me how can I restrict the input to future dates?

Answer 1

You can use min and max attributes of HTML5 input date

HTML5 code

<input type="date" name="bday" min="2014-05-11" max="2014-05-20">

EDIT

You need to use jQuery to achieve it

jQuery code

$(function(){
    var dtToday = new Date();

    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();

    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();

    var maxDate = year + '-' + month + '-' + day;    
    $('#txtDate').attr('max', maxDate);
});

Explanation max attribute of HTML5 input date takes month and day in double digit format.

Ex: 5 (Month) is not valid whereas 05 (Month) is valid Ex: 1 (Day) is not valid whereas 01 (Day) is valid

So I have added below code

if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

Check my updated fiddle

Refer fiddle demo

Answer 2

To build on @Chirag Vidani's answer, the date can be generated with fewer lines like this:

var now = new Date(),
    // minimum date the user can choose, in this case now and in the future
    minDate = now.toISOString().substring(0,10);

$('#my-date-input').prop('min', minDate);

Answer 3

Here is a PHP solution that gets today's date and sets it as the maximum.

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

This will put it in the correct double-digit format for the day and month. https://www.php.net/manual/en/function.date.php

Answer 4

Some others have asked the question about setting the max date to the current date. The suggested answers involve using JavaScript. But my solution was to use the server side language to generate the max parameter for the input. I know the OP didn't ask about a server-side approach. But this solution works well for me using C# Razor as my server language.

On the server I write:

@Html.TextBox("CurrentDate",
    Model.CurrentDate.ToString("yyyy-MM-dd"),
    new {
        @class = "form-control",
        @type = "date",
        max = DateTime.Now.ToString("yyyy-MM-dd")
    })

And then MVC outputs this Html:

<input class="form-control" id="CurrentDate" name="CurrentDate"
    type="date" max="2016-11-10" value="2016-11-10">

With other server languages the approach would be to similarly generate the max parameter using the Server's date, which may or may not work if your requirement is to use the Client's date. For my situation the Server's date is what is needed because that's where the data is stored.

Answer 5

Use the max attribute which is the expected upper bound for the element's value.

<input type="date" max="2014-05-15"/>

Reference: http://www.w3.org/TR/html-markup/input.date.html

Answer 6

I have updated the Working fiddle

http://jsfiddle.net/9WVY8/16/

HTML & js:

     var dateControler = {
                currentDate : null
            }

             $(document).on( "change", "#txtDate",function( event, ui ) {
                    var now = new Date();
                    var selectedDate = new Date($(this).val());

                    if(selectedDate > now) {
                        $(this).val(dateControler.currentDate)
                    } else {
                        dateControler.currentDate = $(this).val();
                    }
                });   

Answer 7

    <input type="date" value="<?php echo date("Y-m-d"); ?>" max="<?php echo date("Y-m-d"); ?>">

This worked for me.

Answer 8

Old Question But a solution, may help someone using JQuery:

    $(document).ready(function () {
        var today = new Date();
        var day=today.getDate()>9?today.getDate():"0"+today.getDate(); // format should be "DD" not "D" e.g 09
        var month=(today.getMonth()+1)>9?(today.getMonth()+1):"0"+(today.getMonth()+1);
        var year=today.getFullYear();

        $("#dpFromDate").attr('max', year + "-" + month + "-" + day);
});

The date format should be YYYY-MM-DD.

Answer 9

you can get that only using JS and HTML:

first let's get the actual date

let n =  new Date();
let y = n.getFullYear();
let m = n.getMonth() + 1;
let d = n.getDate();

and lets do the minDate and Max date strings, and evaluate if we'll need put a 0 in the month/day to keep the required format:

if(m < 10)
   m = '0' + m.toString();
else if(d < 10)
   d = '0' + d.toString();

let minDate = y + '-' + m + '-' + d
let maxDate = y + '-' + "0"+(parseFloat(0+m) + 1) + '-' + d

after, lets set it in the HTML:

<input name="Fecha_end" type="date" id="#Fecha_end">

let Fecha_end_input = document.getElementById("#Fecha_end")

Fecha_end_input.setAttribute("min",minDate)
Fecha_end_input.setAttribute("max",maxDate)

Total:

HTML:

<input name="Fecha_end" type="date" id="#Fecha_end">

JS:

let Fecha_end_input = document.getElementById("#Fecha_end")

let n =  new Date();
let y = n.getFullYear();
let m = n.getMonth() + 1;
let d = n.getDate();
if(m < 10)
   m = '0' + m.toString();
else if(d < 10)
   d = '0' + d.toString();

let minDate = y + '-' + m + '-' + d
let maxDate = y + '-' + "0"+(parseFloat(0+m) + 1) + '-' + d

Fecha_end_input.setAttribute("min",minDate)
Fecha_end_input.setAttribute("max",maxDate)

Answer 10

<script>
   var today = new Date().toISOString().slice(0, 16);                 
   document.getElementsByName("time_start")[0].max = today;  
</script>  

and input id="time_start"

Answer 11

Html with Vue

<input type="month" :max="getTodaysMonth()">

Vue:

getTodaysMonth() {
 var today = new Date();
 var month = today.getMonth() + 1;
 var year = today.getFullYear();
 if (month < 10) {
  month = "0" + month;
 }
 return year + "-" + month;
}

Answer 12

You can use Javascript to achieve the desired effect. Here is an example that will guarantee that your form date field only accepts dates between today and the next year. You can adjust the code based on your needs.

<input id="dateInput" type="date" name="date">

   <script>
      const dateInput = document.getElementById('dateInput');

      const today = new Date();
      const oneYearFromToday = new Date();
      oneYearFromToday.setFullYear(today.getFullYear() + 1);

      dateInput.min = formatDate(today);
      dateInput.max = formatDate(oneYearFromToday);

      function formatDate(date) {
         const year = date.getFullYear();
         const month = String(date.getMonth() + 1).padStart(2, '0');
         const day = String(date.getDate()).padStart(2, '0');
         return `${year}-${month}-${day}`;
      }
   </script>

Load the <script> in the body section of your document.