Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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();
like image 689
Raj Avatar asked Dec 15 '16 10:12

Raj


2 Answers

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");
like image 110
Raj Avatar answered Nov 18 '22 07:11

Raj


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.

like image 20
Igor Dolzhenkov Avatar answered Nov 18 '22 07:11

Igor Dolzhenkov