How to disable dates on calendar using javascript

Question

I have this code

$(".datepicker").datepicker();
$(".datepicker-to").datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: "0D"
});

Then my textboxes are:

<div>
    <span>Date From :</span>
    <input type="text" class="datepicker-to" id="dateFrom" name="dateFrom" />
</div>
<div>
    <span>Date To :</span>
    <input type="text" class="datepicker-to" id="dateTo" name="dateTo" />
</div>

Now, when I clicked a date in "from" txtbox I want to disable the dates in "to" txtbox. The dates that needs to be disble are dates before the dates I entered in the "from" txtbox because obviously it is not valid to enter dates from jan21-jan9...I hope I make myself clear...

Possible duplicate of [Jquery UI datepicker. Disable array of Dates](https://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates) — Liam, Nov 24 '17 at 16:11

score 1 · Answer 1 · answered Jun 18 '13 at 18:27

In datepicker select callback you can put the textbox attribute readonly.So it goes in to inactive mode.

 $(".datepicker-to").datepicker({
        changeMonth: true,
          changeYear: true,
        maxDate: "0D",
       onSelect: function( selectedDate ) {
         //disable another one here            
    }
    });

zsawyer · Answer 2 · 2013-06-18T19:49:27.267

Like Baadsha wrote, use onSelect to find out when the date was picked. However I suggest that you then set the minDate (using the after initilization method) and refresh the widget.

$("#dateFrom").datepicker({
    "onSelect": function () {
        var input = $(this);
        $("#dateTo").datepicker("option", "minDate", input.datepicker("getDate"));
        $("#dateTo").datepicker("refresh");
    }
});
$("#dateTo").datepicker();

FIDDLE DEMO

To have the datepickers update in both directions set the maxDate too:

$("#dateTo").datepicker({
    "onSelect": function () {
        var input = $(this);
        $("#dateFrom").datepicker("option", "maxDate", input.datepicker("getDate"));
        $("#dateFrom").datepicker("refresh");
    }
});

FIDDLE DEMO 2

UPDATE: To disable the selected date, too, you will have to compensate and offset the selected date by one day:

var dayAfter = input.datepicker("getDate");
dayAfter.setDate(dayAfter.getDate() + 1);
$("#dateTo").datepicker("option", "minDate", dayAfter);

FIDDLE DEMO 3

please refer to my new post...I want my selected date in "from" to be disbled in my "To" — PeterS, Jun 18 '13 at 19:29

How to disable dates on calendar using javascript

2 Answers2