mykey mykey - 1 year ago 65
HTML Question

unable to disable future date in jquery datepicker

My application requires that the date picker should display the calender body on click, select date today's date being active and future date deactivated... i am new in jquery and it has disturbed me for a month. assist please. I am able to display the datepicker and choose any date upto 2030, but i need the calender to be active upto today's date or current date only.
thanks in advance.

my calender to be displayed..

<table id="calenderTable" class="">
<tbody id="calenderTableHead">
<td colspan="4" align="center">
<select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));" id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));" id="selectYear">
<td align="center">
<a href="#" onClick="closeCalender();"><font color="#003333" size="+1">X</font></a>
<tbody id="calenderTableDays">
<tr style="">
<tbody id="calender"></tbody>

the date field is as below:

<td>effected date</td>
<input type="text" name="eff_date" class="required" id="eff_date"><a href="#" onClick="setYears(1947, 2030);
showCalender(this, 'eff_date');" class="" id="calender">
<img src="Calender/calender.png"></a>

e_r e_r
Answer Source

This is pretty simple to accomplish assuming I understand the question. You want to set the maximum allowable selectable date, correct? All you need to use is the maxDate option.

Here is a complete example, assuming you include the proper files referenced in the script and link tags:

    <meta charset="utf-8">
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />   
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    <div class="demo">
        <p>Date: <input type="text" id="datepicker"></p>
$(function() {
    $("#datepicker").datepicker({maxDate: '+0d'});

You can see it working here: