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 — Pekka
– Pekka, Commented Mar 4, 2014 at 5:28

Amit · Accepted Answer · 2014-02-25 06:34:32Z

97

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, 2014 at 6:34

Amit

15.4k8 gold badges49 silver badges69 bronze badges

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

3 Comments

HEEN Over a year ago

@Amit: Thanks for the answer, it is working as a charm.

Akshay Hazari Over a year ago

Somehow this

$('#birth_date').datetimepicker({                 timepicker:false,         format:'d/m/Y',         maxDate : '0',                 maxDateTime:new Date()             });

doesn't work.

Muthu17 Over a year ago

$(function() { $( "#datepicker" ).datepicker({ maxDate: new Date() }); }); is working for me

Dnyaneshwar Harer · Accepted Answer · 2018-04-25 15:00:57Z

23

This worked for me endDate: "today"

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

  });

SOURCE

answered Apr 25, 2018 at 15:00

Dnyaneshwar Harer

8628 silver badges13 bronze badges

3 Comments

Vipertecpro Over a year ago

This endDate: "today" helped me

Raham Jun 24 at 7:52

@Dnyaneshwar Harer hats off. Thank You

Doug Breaux Jun 25 at 14:18

As of today, I had to do maxDate: "today", not endDate

Megamind · Accepted Answer · 2017-01-13 06:47:02Z

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, 2017 at 6:47

Megamind

991 silver badge1 bronze badge

1 Comment

Dipak Kumar Pusti Over a year ago

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.

Praveen · Accepted Answer · 2014-02-25 07:14:01Z

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, 2014 at 7:14

answered Feb 25, 2014 at 6:31

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

3 Comments

Hassan Sardar Over a year ago

Please modify my fiddle

Praveen Over a year ago

@CodeHunter may I know for which one start_date or end_date?

Hassan Sardar Over a year ago

For start date its obvious

Mohit Pandey · Accepted Answer · 2014-02-25 06:31:20Z

3

Change maxDate to current date

maxDate: new Date()

It will set current date as maximum value.

answered Feb 25, 2014 at 6:31

Mohit Pandey

3,8597 gold badges28 silver badges38 bronze badges

Comments

Kalamarico · Accepted Answer · 2017-09-29 11:24:43Z

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, 2017 at 11:24

Kalamarico

5,71622 gold badges57 silver badges74 bronze badges

answered Sep 29, 2017 at 11:01

burningEye

297 bronze badges

Comments

Shahzad Barkati · Accepted Answer · 2021-03-19 12:33:15Z

2

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, 2021 at 12:33

Shahzad Barkati

2,5506 gold badges28 silver badges34 bronze badges

answered Nov 1, 2018 at 5:49

megha mohan

212 bronze badges

Comments

Shahzad Barkati · Accepted Answer · 2021-03-19 12:31:25Z

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, 2021 at 12:31

Shahzad Barkati

2,5506 gold badges28 silver badges34 bronze badges

answered Dec 24, 2020 at 14:05

Kishore Thangapandi

2292 silver badges5 bronze badges

1 Comment

Suraj Rao Over a year ago

your code to disable past dates doesnt look right.. shouldn't it be start date?

Dhia · Accepted Answer · 2016-06-22 13:05:21Z

-4

maxDate: new Date()

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

edited Jun 22, 2016 at 13:05

Dhia

10.7k11 gold badges62 silver badges70 bronze badges

answered Jun 22, 2016 at 9:57

rupank

72 bronze badges

1 Comment

Tom Lord Over a year ago

I don't think this adds anything to the existing answers.

Collectives™ on Stack Overflow

Disable future dates after today in Jquery Ui Datepicker

9 Answers 9

3 Comments

3 Comments

1 Comment

3 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

3 Comments

1 Comment

3 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related