How to disable future dates in datepicker using jquery?

Question

Datepicker future dates not disable. Here is my code for datepicker in HTML

<div class="input-group input-append date" id="dp3" data-date="" data-date-format="mm-dd-yyyy">
    <input class="form-control" style="width: 106px; height: 30px;" type="text" id="nodate" value="<?php echo date('m-j-Y');?>"  readonly=""/>
        <div class="input-group-addon add-on" style="width: 35px; height: 25px;"><i class="icon-calendar"></i></div>
        &emsp;
        <button type="button" class="btn btn-primary" onclick="window.location = '<?php echo base_url().'index.php/attendance/noRecordDate/';?>'+ $('#nodate').val()">Add Attendance</button>
</div>

Here is my script:

<script>
    $(function() {
    $( "#nodate" ).datepicker({  maxDate: new Date() });
});
</script>

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

maxDate

Multiple types supported:

Date: A date object containing the maximum date.
Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.
String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

so you need to either set the date object properly , or simply set as string or number as follows:

<script>
    $(function() {
    $( "#nodate" ).datepicker({  maxDate: '0' });
});
</script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 25, 2017 at 13:43

hassan

8,3282 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

hassan Over a year ago

quote it as follows: { maxDate: '0' }

Ronnel Gonzales Over a year ago

I mean I use your code exactly, but it is not working.

hassan Over a year ago

please make sure that your browser does not caching js , CTRL+F5 to reload your js files

Ronnel Gonzales Over a year ago

I did not put in js file. I only put in my head html.

hassan Over a year ago

works like a charm ! jsfiddle.net/9v7f7r0p , PS i had to set the date value statically as long as jsfiddle doesn't parse php;

|

Rafiqul Islam · Accepted Answer · 2017-03-25 14:11:09Z

1

$(document).ready(function () {

    var dbDate = "2017-03-24";
    var date2 = new Date(dbDate);

    $( "#nodate" ).datepicker({ 
    
      
     dateFormat: 'mm-dd-yy',
     maxDate: new Date()
    
    }).datepicker('setDate', date2);

    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="input-group input-append date" id="dp3" data-date="" data-date-format="mm-dd-yyyy">
    <input class="form-control" style="width: 106px; height: 30px;" type="text" id="nodate" value=""  readonly=""/>
        <div class="input-group-addon add-on" style="width: 35px; height: 25px;"><i class="icon-calendar"></i></div>
        &emsp;
        <button type="button" class="btn btn-primary" onclick="window.location = '<?php echo base_url().'index.php/attendance/noRecordDate/';?>'+ $('#nodate').val()">Add Attendance</button>
</div>

answered Mar 25, 2017 at 14:11

Rafiqul Islam

1,6561 gold badge14 silver badges25 bronze badges

2 Comments

Ronnel Gonzales Over a year ago

I don't know why it is not working for mine, my datepicker btw is from bootstrap.

Rafiqul Islam Over a year ago

If error in javascript file then all function will not work or if you add javascript source file more than one then it will not working

Collectives™ on Stack Overflow

How to disable future dates in datepicker using jquery?

2 Answers 2

10 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related