So deaktivieren Sie alle anderen Datum außer dem ausgewählten Datum in jquery datepicker

Question

Ich habe zwei Datepicker mit dem Namen Startdatum und Enddatum. Ich möchte alle anderen Daten außer dem ausgewählten Datum von Startdatum deaktivieren. Zum Beispiel, wenn ich 15/12/2016 vom Startdatum Datepicker gewählt habe, dann möchte ich alle anderen Daten im Enddatum Datepicker außer dem 15. Tag deaktivieren.

Demofiddle: https://jsfiddle.net/d7vzxn8s/

Dies ist mein 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

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"); 

Answer 2

Wenn Sie nur eine Option machen wollen in der "enddate" Wähler zu holen, ist es oblivous, dass "enddate" entsprechen würde "startdate".

Deshalb sollten Sie einfach Wert kopieren von „startdate“, wie Sie es auf die „enddate“ Wähler und disable „enddate“ pick überhaupt geändert werden.

Answer 3

Sie können dies in zwei Schritten erreicht werden:

1. Fügen Sie das Attribut readonly-#enddate, so dass der Inhalt nicht bearbeitet oder vom Benutzer geändert werden kann; Wenn der Wert #startdate aktualisiert wird, wird der Wert #enddate dann ebenfalls aktualisiert

Hier ist die jQuery für Schritt 2:

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

Arbeitsbeispiel:

$(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>