Gegeben ist ein kleines Formular für eine Reisebuchung, bei dem man den gewünschten
Start der Reise angeben können und wo automatisch nach der Eingabe des vollständigen
Startdatums als Enddatum der Wert für ein um 2 Wochen erhöhtes Startdatum vom
Formular vorgeschlagen wird.
Das Formular enthält die 6 input-Textfelder mit den id-Attributen: starttag, startmonat,
startjahr, endtag, endmonat, endjahr.
1. Erstelle eine JavaScript-Funktion, die die oben beschriebene Anforderung erfüllt
2. Erstelle den erforderlichen HTML-Kode, damit die Funktion aus 1. zum richtigen
Zeitpunkt ausgeführt wird.
Code
<script src="/js_webseite/jquery.js"></script>
<style>
h4{
}
h2,h4{
width:22%;
text-align:center;
}
span{
display:flex;
}
input{
width:100px;
height:20px;
}
body{
display:flex;
flex-direction:column;
}
span *{
flex:1;
}
</style>
<span><h2>Start Datum</h2><h4>Zeit spanne</h4>
<h2 id="ww">End Datum</h2></span><br>
<span>
Tag<input type="text" id="startt">
Monat<input type="text" id="startm">
Jahr<input type="text" id="startj">
<p>-50
<input type="number" id="eingabe" step="1" min="-50" max="50" value="0"> 50</p>
Tag<input type="text" id="endet">
Monat<input type="text" id="endem">
Jahr<input type="text" id="endej">
</span>
<script>
var jetzt = new Date(),
anfang=jetzt.toLocaleDateString('de-DE');
ab=anfang.split('.')[1];
ab1=anfang.split('.')[2];
ab2=anfang.split('.')[0];
document.getElementById('startt').value=ab2;
document.getElementById('startm').value=ab;
document.getElementById('startj').value=ab1;
$('input').change(function(){
resultierend = document.getElementById('eingabe').value;
jetzt = new Date();
t=document.getElementById('startt').value;
m=document.getElementById('startm').value;
j=document.getElementById('startj').value;
var gesetzt = new Date(''+m+'.'+t+'.'+j+''),
tage = parseInt(resultierend);
anfang=gesetzt.setDate(jetzt.getDate() + tage);
anfang=jetzt.toLocaleDateString('de-DE');
ende=gesetzt.toLocaleDateString('de-DE');
b=ende.split('.')[1];
b1=ende.split('.')[2];
b2=ende.split('.')[0];
document.getElementById('endet').value=b2;
document.getElementById('endem').value=b;
document.getElementById('endej').value=b1;
});
</script>