Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable future dates after today in Jquery Ui Datepicker

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'

        }

);
like image 977
Hassan Sardar Avatar asked Feb 25 '14 06:02

Hassan Sardar


People also ask

How do I turn off future date in calendar?

In the calendar widget their is an option to select max date, in which you can set the value as CurrDate(). So that future dates in the calendar would be disabled.

How do I disable date range picker?

DateRangePicker can be inactivated on a page, by setting enabled value as false that will disable the component completely from all the user interactions including in form post.

How do I show only future dates in datepicker?

To make any past dates disable or for only future dates, you first have to find the instantiation of the datepicker, and set the startDate setting to '+0d'.


4 Answers

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

like image 98
Amit Avatar answered Oct 23 '22 12:10

Amit


This worked for me endDate: "today"

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

  });

SOURCE

like image 31
Dnyaneshwar Harer Avatar answered Oct 23 '22 13:10

Dnyaneshwar Harer


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

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

like image 8
Megamind Avatar answered Oct 23 '22 13:10

Megamind


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 });
like image 7
Praveen Avatar answered Oct 23 '22 13:10

Praveen