How do I restrict past dates in HTML5 input type Date?

Question

I am trying to restrict past dates in input type="date". I am able to restrict future dates, but how can I restrict past dates?

$(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 minDate= year + '-' + month + '-' + day;

    $('#txtDate').attr('min', minDate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="txtDate" />

Possible duplicate of [Restrict future dates in HTML 5 data input](http://stackoverflow.com/questions/23671407/restrict-future-dates-in-html-5-data-input) — Esko, Apr 07 '17 at 09:32
Both, min and max, if min date is today, then you can't select yesterday. — Esko, Apr 07 '17 at 09:34
I see no problem there. The snippet in your question just works fine! — Abhitalks, Apr 07 '17 at 09:50

score 23 · Accepted Answer · edited Mar 14 '21 at 00:04

You can try this

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

$(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;

    // or instead:
    // var maxDate = dtToday.toISOString().substr(0, 10);

    alert(maxDate);
    $('#txtDate').attr('min', maxDate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="txtDate" />

score 22 · Answer 2 · answered May 14 '19 at 17:27

22

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

<input type="date" id="txtDate" min="<?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

answered May 14 '19 at 17:27

Painguin

1,027
14
26

or using laravel templating: – Buchi May 29 '21 at 11:01

score 20 · Answer 3 · answered Jul 29 '20 at 13:15

20

Programmatically you can do something like this to disable past dates from being selectable:

<input type='date' min={new Date().toISOString().split('T')[0]} />

answered Jul 29 '20 at 13:15

Muhamed Krasniqi

1,134
1
13
20

Thanks Muhamed for the tip :-) – Kieran Ryan Nov 19 '20 at 21:51
@MuhamedKrashi what about if i wanna only able to choose last 45 days?? – greenridinghood May 11 '22 at 08:21
Could you please explain what 'T' stands for ? because I console.log that and didn't see T – Erika Feb 01 '23 at 21:08
@greenridinghood thats only for disabling past dates. For implementing any logic then you need to use javascript or write some code for more complex scenarious. – Muhamed Krasniqi Jul 24 '23 at 10:45
@Erika usually a datetime is in a format like: 2023-09-06T23:30:00, so we split it by the T in the middle which means split the date and time and then get the date part. – Muhamed Krasniqi Jul 24 '23 at 10:46

score 18 · Answer 4 · edited Sep 18 '22 at 12:23

18

The below code may help you. It is normal HTML5 code:

Enter a date before 1980-01-01:

<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02">

See this working example.

edited Sep 18 '22 at 12:23

Peter Mortensen

30,738
21
105
131

answered Apr 07 '17 at 09:47

umishra

390
2
14

score 4 · Answer 5 · answered Sep 10 '18 at 08:02

In HTML:

<input type="date" id="ExpiryDate" class="form-control" min="9/10/2018"/>

Using Jquery new version:

function SetMinDate() {
    var now = new Date();

    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);

    var today = now.getFullYear() + "-" + (month) + "-" + (day);

    $('#ExpiryDate').val(today);
    $('#ExpiryDate').attr('min', today); }

score 2 · Answer 6 · answered Dec 12 '19 at 09:40

2

<input type="date" id="date"> 
var date = new Date().toISOString().slice(0,10);

//To restrict past date

$('#date').attr('min', date);

//To restrict future date

$('#date').attr('max', date);

answered Dec 12 '19 at 09:40

Vikash Kumar Jha

39
8

1

It would be ideal to provide additional info to the code. – Ashwin Geet D'Sa Dec 12 '19 at 10:02

score 1 · Answer 7 · answered Apr 23 '19 at 11:03

1

  $(function() {
          $(document).ready(function () {
            var todaysDate = new Date();
            var year = todaysDate.getFullYear();
            var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);
            var day = ("0" + todaysDate.getDate()).slice(-2);
            var maxDate = (year +"-"+ month +"-"+ day);
            $('.class_of_input_field').attr('min',maxDate);
          });
        });``

answered Apr 23 '19 at 11:03

Shah Xahur

11
2

2

Hi! It would make your answer more useful if you provide some extra explanation/context (ex what advantage it offers from other answers, what was wrong with the original snippet etc). – Geekfish Apr 23 '19 at 11:15

score 1 · Answer 8 · answered Apr 14 '21 at 11:22

1

To select To date greater than from date we can use this code

 $(document).on("change", "#from", function () {
        debugger
        var date = $(this).val();
       
        $('#to').attr('min', date);
    
    });

answered Apr 14 '21 at 11:22

Shivangi

9
1

score 1 · Answer 9 · answered Jun 11 '22 at 04:41

$(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 minDate= year + '-' + month + '-' + day;
    
    $('#date').attr('min', minDate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="date" />

score 0 · Answer 10 · answered Jul 18 '22 at 18:03

0

If you are using laravel then just do it like this

<input type="date" name="start_date" required min="{{date('Y-m-d')}}" />

and for regular HTML just specify the date

<input type="date" name="start_date" required min="2022-07-18" />

answered Jul 18 '22 at 18:03

Labhansh Satpute

181
2
6

score 0 · Answer 11 · edited Aug 18 '22 at 11:29

0

in laravel 5.8,

<input type="date" class="form-control" name="from_date" id="from_date"required min="{{date('Y-m-d')}}"  value="{{ old('from_date') }}">

here, i used min="{{date('Y-m-d')}}"

edited Aug 18 '22 at 11:29

vimuth

5,064
33
79
116

answered Aug 14 '22 at 16:22

ramal

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 18 '22 at 11:46

score 0 · Answer 12 · answered Oct 27 '22 at 06:53

I've found this working (HTML) method. (i.e this works with only textbox with date mode, not with calendars or date-time pickers.)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
    $(function () {
        var today = new Date();
        var month = ('0' + (today.getMonth() + 1)).slice(-2);
        var day = ('0' + today.getDate()).slice(-2);
        var year = today.getFullYear();
        var date = year + '-' + month + '-' + day;
        $('[id*=txtExpDate]').attr('min', date);
    });
</script>

<asp:TextBox ID="txtExpDate" runat="server" TextMode="Date"></asp:TextBox>

score 0 · Answer 13 · answered Apr 22 '23 at 13:38

i use something like this i have my input tag

<input name="Date" type="date" onkeyup="checkdate(this)" onchange="checkdate(this)" class="form-control">

and the function is

function checkdate(e){

if(new Date(e.value)-new Date()<0){e.value='';

e.style.border="1px solid red"



return false}
}

How do I restrict past dates in HTML5 input type Date?

13 Answers13

Linked

Related