Wie Tage hinzufügen in <input type = "date">

Question

Ich habe diese Sätze von Eingaben hier;

Days:<select id="select"> 
     <option value="150 days">150 days</option> 
     <option value="200 days">200 days</option> 
     </select> 
Date1:<input type="date" id="date1"> 
Date2:<input type="date" id="date2"> 

Ich weiß nicht, wie diese richtig zu erklären, aber was angenommen hat, ist dies geschehen:

, wenn der Benutzer 150 Tage wählt, wird es zu date1 hinzugefügt werden (was auch durch den Benutzer eingegeben wird) und wird automatisch in date2 angezeigt.

beachten Sie, dass date1 ist nicht das aktuelle Datum ...

Answer 1

Sie haben den Wert von date1, um es in ein Datum umwandeln, fügen Sie die Tage von Ihrem select-Elemente, um es und es in das date2 Feld zu setzen. Sie können dies in Javascript tun, indem Sie eine Funktion erstellen, die bei Änderung des 'date1'-Feldes ausgelöst wird.

HTML:

Days:<select id="select"> 
     <option value="150">150 days</option> 
     <option value="200">200 days</option> 
     </select> 
Date1:<input type="date" onchange="setSecondDate();" id="date1"> 
Date2:<input type="date" id="date2"> 

javascript:

function setSecondDate() { 
    var days = document.getElementById("select").value; 
    var date = new Date(document.getElementById("date1").value); 
    date.setDate(date.getDate() + parseInt(days)); 
    document.getElementById("date2").valueAsDate = date; 
} 

Hier ist ein jsfiddle Beispiel: https://jsfiddle.net/vk1ujuu2/

--- --- Bearbeiten

Wenn Sie es brauchen zu arbeiten In allen Browsern können Sie den Datepicker von JQueryUI verwenden. Sie müssen nur Jquery und Jquery UI einbeziehen und eine zusätzliche Funktion zum Analysieren des Datums in eine Zeichenfolge schreiben.

Eingeschlossen sind:

<link rel="stylesheet" href="jquery-ui.min.css"> 
<script src="external/jquery/jquery.js"></script> 
<script src="jquery-ui.min.js"></script> 

Parsing-Funktion:

Date.prototype.yyyymmdd = function() { 
    var mm = this.getMonth() + 1; 
    var dd = this.getDate(); 

    return [this.getFullYear(), 
      (mm>9 ? '' : '0') + mm, 
      (dd>9 ? '' : '0') + dd 
     ].join('-'); 
}; 

JsFiddle: https://jsfiddle.net/vk1ujuu2/5/