CODEWITHSUNDEEP
javascriptjquerydatejquery-uidatepicker
Raj
Raj

Reputation: 879

How to disable all other date except from selected date in jquery 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.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();

Upvotes: 5

Views: 2940

Answers (3)

Raj
Raj

Reputation: 879

Modified Fiddle : 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");

Upvotes: 5

Rounin
Rounin

Reputation: 29453

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.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>

Upvotes: 0

Igor Dolzhenkov
Igor Dolzhenkov

Reputation: 709

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.

Upvotes: 1

Related Questions