Disable future dates after today in Jquery Ui Datepicker

Question

I want to disable all the future dates after today in Jquery Ui Datepicker

Here is the Demo :

Code :

$( "#start_date" ).datepicker(

        { 
            maxDate: '0', 
            beforeShow : function()
            {
                jQuery( this ).datepicker('option','maxDate', jQuery('#end_date').val() );
            },
            altFormat: "dd/mm/yy", 
            dateFormat: 'dd/mm/yy'

        }

);

$( "#end_date" ).datepicker( 

        {
            maxDate: '0', 
            beforeShow : function()
            {
                jQuery( this ).datepicker('option','minDate', jQuery('#start_date').val() );
            } , 
            altFormat: "dd/mm/yy", 
            dateFormat: 'dd/mm/yy'

        }

);

possible duplicate of [Disable future dates in jQuery UI Datepicker](http://stackoverflow.com/questions/4002781/disable-future-dates-in-jquery-ui-datepicker) — Pekka, Mar 04 '14 at 05:28

score 95 · Accepted Answer · answered Feb 25 '14 at 06:34

95

Try this

 $(function() {
  $( "#datepicker" ).datepicker({  maxDate: new Date() });
 });

Or you can achieve this using as below:

$(function() {
  $( "#datepicker" ).datepicker({  maxDate: 0 });
});

Reference

DEMO

UPDATED ANSWER

answered Feb 25 '14 at 06:34

Amit

15,217
8
46
68

@Amit: Thanks for the answer, it is working as a charm. – Nad Dec 06 '14 at 10:09
Somehow this `$('#birth_date').datetimepicker({ timepicker:false, format:'d/m/Y', maxDate : '0', maxDateTime:new Date() }); ` doesn't work. – Akshay Hazari Jun 21 '17 at 07:02
1

$(function() { $( "#datepicker" ).datepicker({ maxDate: new Date() }); }); is working for me – Muthu17 Jan 04 '19 at 04:39

score 19 · Answer 2 · answered Apr 25 '18 at 15:00

19

This worked for me endDate: "today"

  $('#datepicker').datepicker({
        format: "dd/mm/yyyy",
        autoclose: true,
        orientation: "top",
        endDate: "today"

  });

SOURCE

answered Apr 25 '18 at 15:00

Dnyaneshwar Harer

792
7
13

1

This `endDate: "today"` helped me – Vipertecpro Mar 26 '19 at 08:14

score 9 · Answer 3 · answered Jan 13 '17 at 06:47

9

In my case, I have given this attribute to the input tag

data-date-start-date="0d" data-date-end-date="0d"

answered Jan 13 '17 at 06:47

Megamind

99
1
1

This should be preferred if you have a generic JS code for all datepickers and out of those you need to restrict date in one or two fields. – dipak_pusti May 25 '21 at 02:45

Praveen · Answer 4 · 2014-02-25T07:14:01.257

7

You can simply do this

$(function() {
    $( "#datepicker" ).datepicker({  maxDate: new Date });
  });

JSFiddle

FYI: while checking the documentation, found that it also accepts numeric values too.

Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.

so 0 represents today. Therefore you can do this too

 $( "#datepicker" ).datepicker({  maxDate: 0 });

edited Feb 25 '14 at 07:14

answered Feb 25 '14 at 06:31

Praveen

55,303
33
133
164

Please modify my fiddle – Hassan Sardar Feb 25 '14 at 06:34
@CodeHunter may I know for which one `start_date` or `end_date`? – Praveen Feb 25 '14 at 06:35
For start date its obvious – Hassan Sardar Feb 25 '14 at 06:35

score 3 · Answer 5 · answered Feb 25 '14 at 06:31

3

Change maxDate to current date

maxDate: new Date()

It will set current date as maximum value.

answered Feb 25 '14 at 06:31

Mohit Pandey

3,679
7
26
38

score 2 · Answer 6 · edited Sep 29 '17 at 11:24

2

In case you are appending Dtpicker,use the following code

$('#enddate').appendDtpicker({
    "dateOnly": true,
    "dateFormat": "YYYY-MM-DD",
    "closeOnSelected": true,
    maxDate: new Date()         
});

edited Sep 29 '17 at 11:24

Kalamarico

5,466
22
53
70

answered Sep 29 '17 at 11:01

burningEye

29
7

score 1 · Answer 7 · edited Mar 19 '21 at 12:33

1

Datepicker does not have a maxDate as an option. I used this endDate option. It worked well.

$('.demo-calendar-default').datepicker({
  autoHide: true,
  zIndex: 2048,
  format: 'dd/mm/yyyy',
  endDate: new Date()
});

edited Mar 19 '21 at 12:33

Shahzad Barkati

2,532
6
25
33

answered Nov 01 '18 at 05:49

megha mohan

11
2

score 1 · Answer 8 · edited Mar 19 '21 at 12:31

1

//Disable future dates after current date

$("#datepicker").datepicker('setEndDate', new Date());

//Disable past dates after current date

$("#datepicker").datepicker('setEndDate', new Date());

edited Mar 19 '21 at 12:31

Shahzad Barkati

2,532
6
25
33

answered Dec 24 '20 at 14:05

Kishore Thangapandi

219
2
5

2

your code to disable past dates doesnt look right.. shouldn't it be start date? – Suraj Rao Dec 24 '20 at 14:14

score -4 · Answer 9 · edited Jun 22 '16 at 13:05

-4

maxDate: new Date()

its working fine for me disable with current date in date range picker

edited Jun 22 '16 at 13:05

Dhia

10,119
11
58
69

answered Jun 22 '16 at 09:57

rupank

7
2

1

I don't think this adds anything to the existing answers. – Tom Lord Jun 22 '16 at 10:03

Disable future dates after today in Jquery Ui Datepicker

9 Answers9

Linked

Related