How to disable all other date except selected date in jquery datepicker

Question

I have two datepickers named startdate and enddate. I want to disable all other dates except the selected date, starting from the start date. for example, if I selected 12/15/2016 from startdate datepicker, then I want to disable all other dates at the end of the date, except for the 15th day.

Demofiddle: https://jsfiddle.net/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(); 

Answer 1

Changed script: https://jsfiddle.net/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"); 

Answer 2

If you want to select only one option in the " enddate " selector, then " enddate " will be equal to " startdate ".

That's why you can just copy the value from " startdate " when you select it in the " enddate " selector and turn off "enddate" for the change at all.

Answer 3

This can be done in two stages:

• Add the readonly attribute to #enddate so that the user cannot edit or modify the content;
• Ensure that when the #startdate value #startdate updated, the #enddate value #enddate also updated.

Here is 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.com/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>