I have two datepickers named startdate and enddate. I want to disable all other dates except the selected date from startdate. for example if i selected 15/12/2016 from startdate datepicker then i want to disable all other dates in enddate datepicker except 15th day.

Demofiddle : /

This is my code :

 <p>Start Date: <input type="text" id="startdate"></p>
 <p>End Date: <input type="text" id="enddate"></p>

 <script>
   $("#startdate").datepicker({
    onSelect: function (selected) {
        var dt = new Date(selected);
        dt.setDate(dt.getDate());
        $("#enddate").datepicker("option", "minDate", dt);
      }
    });
  $("#enddate").datepicker();

I have two datepickers named startdate and enddate. I want to disable all other dates except the selected date from startdate. for example if i selected 15/12/2016 from startdate datepicker then i want to disable all other dates in enddate datepicker except 15th day.

Demofiddle : https://jsfiddle/d7vzxn8s/

This is my code :

 <p>Start Date: <input type="text" id="startdate"></p>
 <p>End Date: <input type="text" id="enddate"></p>

 <script>
   $("#startdate").datepicker({
    onSelect: function (selected) {
        var dt = new Date(selected);
        dt.setDate(dt.getDate());
        $("#enddate").datepicker("option", "minDate", dt);
      }
    });
  $("#enddate").datepicker();

• javascript
• jquery
• date
• jquery-ui
• datepicker

3 Answers 3

Modified Fiddle : https://jsfiddle/d7vzxn8s/2/

var dateToday = new Date();
        var selectedDate;
        $("#startdate").datepicker({
            minDate: dateToday,
            onSelect: function (dateText, inst) {
                selectedDate = $(this).datepicker( "getDate" );
                var slctdDate = selectedDate.getDate()
               // alert(selectedDate);
                $("#enddate").datepicker({
                minDate: inst.day,
                beforeShowDay: function(date){
                    //Only allow fri, sat

                        return [date.getDate()==slctdDate];

                }
                });

            }
        });

        $("#enddate").datepicker("option");

If you want to make only one option to pick in the "enddate" selector, it is oblivous that "enddate" would equal to "startdate".

That's why you can simply copy value from "startdate" as you pick it to the "enddate" selector and disable "enddate" to be changed at all.

You can achieve this in two steps:

1. Add the attribute readonly to #enddate, so that the content cannot be edited or changed by the user;
2. Ensure that when the value of #startdate is updated, the value of #enddate is then updated too.

Here is the jQuery for Step 2:

   $("#startdate").change(function(){
       $("#enddate").val($("#startdate").val());
   });

Working Example:

$(document).ready(function(){

   $("#startdate").change(function(){
    $("#enddate").val($("#startdate").val());
   });

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Start Date: <input type="text" id="startdate"></p>
<p>End Date: <input type="text" id="enddate" readonly></p>