Ich habe: Datum 0 = Startdatum Datum 1 = Ergebnisdatum (nach Hinzufügen der Anzahl der Tage) NDays = Anzahl der hinzuzufügenden Tage

Ich brauche (js), um zu machen: Date0 + NDays = Date1 Hilf mir bitte, ich habe 0.1 Code-Kenntnisse!

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript">

    </script>
</head>
<body>
    <div id="reserve_form">

    <div id="pickup_date"><p><label class="form">Date 0 :</label><input type="text date" value="10/15/1555" class="textbox" id="pick_date" name="pickup_date" onchange="cal()"</p></div>

    <div id="dropoff_date"><p><label class="form">Date 1 :</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()"/></p></div>

    <div id="numdays"><label class="form"> NDays :</label><input type="text" class="textbox" id="numdays2" name="numdays"/></div>

    </div>
</body>
</html>
1
Wolf Tatoo 17 Jän. 2019 im 23:49

3 Antworten

Beste Antwort

Benjamin empfahl Moment, eine absolut großartige Bibliothek, um Datum und Uhrzeit zu manipulieren. Die DOM-Manipulation wird jedoch nicht von Moment abgedeckt. Sie müssen das DOM abfragen, Ereignisse abhören und das DOM als Antwort darauf aktualisieren.

Wenn wir die anstehende Aufgabe dekonstruieren, müssen wir

  • Rendern Sie drei Felder, im einfachsten Fall drei Eingaben.
  • In den Eingaben, die das Startdatum und die hinzuzufügenden zusätzlichen Daten darstellen, müssen wir Ereignis-Listener, die Ereignisse" ändern "abhören und die Werte dieser beiden Felder abrufen, um das Enddatum zu berechnen.
  • Für die dritte Eingabe, die das Enddatum anzeigen soll, müssen wir ihren Wert so oft ändern, wie die ersten beiden Eingaben geändert werden und das Enddatum tatsächlich berechnet werden kann.

Wir können uns den HTML-Teil als nur drei Eingaben vorstellen:

<input id="start" type="date">
<input id="inc" type="number">
<input id="result" type="date">

Die einfachste Lösung sieht folgendermaßen aus:

window.addEventListener('DOMContentLoaded', () => {
  const start = document.getElementById('start');
  const inc = document.getElementById('inc');
  const result = document.getElementById('result');

  const updateEndDate = () => {
    const startDate = new Date(start.value);
    const addDays = Number(inc.value);

    if (!isNaN(startDate) && !isNaN(addDays)) {
      const days = startDate.getDate(); // <- returns the day component of the date (as opposed to weekday)
      const endDate = new Date(startDate);

      endDate.setDate(days + addDays);
      result.value = endDate;
    }
  };

  start.addEventListener('change', updateEndDate);
  inc.addEventListener('change', updateEndDate);
});

Sie können sehen, wie dieser Code auf Codepen funktioniert, und Sie sind absolut willkommen um es zu gabeln, zu ändern, so viel damit zu spielen, wie du willst. Lassen Sie uns ein wenig durch den Code gehen.

Erstens kann jedes DOM-Element DOM-Ereignisse auslösen. Wir können Code schreiben, der diese Ereignisse abhört und Ereignis-Listener ausführt - Funktionen, die wir definieren und steuern. Daher fügen wir zwei Ereignis-Listener hinzu: einen zum Eingabefeld start, der das Startdatum im Datumsformat enthält (da der Typ dieses Felds "Datum" ist), und einen zum Eingabefeld inc, das ein zusätzliches Feld darstellt Tage hinzugefügt werden.

Dann deklarieren wir eine Funktion, die jedes Mal ausgeführt wird, wenn ein "Änderungs" -Ereignis entweder im Eingabefeld start oder inc ausgelöst wird. Wir nennen diese Funktion updateEndDate, weil das ihr Zweck ist. Sie können es natürlich anders nennen.

Schließlich machen wir innerhalb der updateEndDate -Funktion drei Dinge: Werte von start - und inc -Feldern abrufen und in ein Datum bzw. eine Zahl umwandeln; wir prüfen, ob dies tatsächlich gültige Werte sind; und wir berechnen das neue (End-) Datum.

Ein Stück, das am verwirrendsten sein könnte, ist dieses:

const days = startDate.getDate();
const endDate = new Date(startDate);

endDate.setDate(days + addDays);

Also die Date#getDate Methode gibt die "Tag" -Komponente eines Datums zurück. Wenn ein Datum "10. Oktober 2000" ist, gibt diese Methode 10 zurück. Wenn es "17. Januar 1990" ist, ist der zurückgegebene Wert 17.

Anschließend erstellen wir eine neue Instanz des Date-Objekts endDate, die mit startDate identisch ist. Dies ist in diesem Fall nicht unbedingt wichtig, aber im Allgemeinen wird empfohlen, auf diese Weise mit dem Datum zu arbeiten, da die Daten in Javascript veränderlich sind. Das Aufrufen von Methoden, insbesondere von Methoden, die als "Set-Something" bezeichnet werden, würde den Wert der Instanz ändern, und häufig möchten Sie dies möglicherweise nicht.

Also ja, das endDate. Als letztes rufen wir {{ X1}} darauf. Stellen Sie sich vor, das Startdatum ist der 17. Januar 2019, und Sie möchten 50 zusätzliche Tage hinzufügen. Wenn wir nur 50 zu 17 addieren, wird das Enddatum der 67. Januar 2019 sein, oder? Nun, das ist eine Sache, die Javascript für uns erledigt: Sobald ein Datum aktualisiert wurde (ein "Set-Etwas" wird darauf aufgerufen), wird es auf eine sinnvolle Weise neu berechnet. Also wird es stattdessen der 8. März sein.

Ich hoffe wirklich, dass diese Antwort Ihnen hilft, herauszufinden, was da drin ist, und ich wünsche Ihnen viel Glück beim Erlernen von Javascript. Schauen Sie sich also den Codepen an und wünschen Sie viel Glück!

0
rishat 17 Jän. 2019 im 22:09

Die JavaScript-Details werden in der Demo kommentiert

/* 
Reference the form bind the change event to it. It will call
function calc() when change event triggers...
*/
document.forms[0].onchange = calc;

function calc(e) {
  // Collect all references to this form
  var ui = this.elements;
  
  // Get the values from both inputs as numbers
  var begin = ui.init.valueAsNumber;
  var cease = ui.term.valueAsNumber;

  // Convert them into milliseconds then subtract begin from cease
  var diff = (new Date(cease)) - (new Date(begin));
  
  /*
  The value of the output is...
  if diff is NaN then output is 0...
  else if diff is less than 0 then output is 0...
  else divide diff by 8.64x10⁷ (total ms in a day)
  */
  ui.days.value = isNaN(diff) ? 0 : diff < 0 ? 0 : diff / (1000 * 60 * 60 * 24);

}
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <form id="form" onsubmit='return false'>

    <label>Date 0: </label><input id="init" name="init" type="date"><br><br>
    <label>Date 1: </label><input id="term" name="term" type="date"><br><br>

    <label>Days: </label><output id="days" name="days">0</output>

  </form>
</body>

</html>
0
zer00ne 17 Jän. 2019 im 22:22

Schauen Sie sich https://momentjs.com an. Fügen Sie die Moment-Bibliothek hinzu, indem Sie das folgende Skript-Tag direkt vor dem </body> -Tag hinzufügen.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
0
Benjamin 17 Jän. 2019 im 21:24