js: Datum - Tage addieren - in Serie

[JS_neuling]

Hi, ich habe folgendes Problem/Herausforderung:

ich habe eine Datenbank abfrage die mir mehrere Elemente (ids, name, tage) ausgibt so wie ein "Start-Datum"

Jetzt möchte ich eine Liste anzeigen mit Name des Elements, Start Datum, Anzahl der Tage (über user Input veränderbar), End Datum

Das End Datum muss natürlich berechnet werden aus Start-Datum und Anzahl der Tage

dieses End Datum soll beim folgenden Element als Start-Datum genommen werden also z.B.

• Start-Datum: 2016-12-18
• Item1 - 2016-12-18 - 3 - 2016-12-21
• Item2 - 2016-12-21 - 5 - 2016-12-26 etc.

Wie gesagt Anzahl der Tage über ein input Feld variabel.

Dazu kommt noch, dass die Liste sortierbar ist, also die Elemente innerhalb der Liste andere Positionen einnehmen können.

Also müsste das Datum (möglichst automatisch) neu berechnet werden wenn der User entweder ein neue Anzahl von Tagen eingibt oder wenn die Reihenfolge in der Liste geändert wird.

Irgendwie bekomme ich das nicht gebacken - bin allerdings auch kompletter javascript Neuling.

Wäre klasse wenn ihr mir helfen könntet

Danke Walter

[JürgenB]

Hallo,

eine Anregung für "Rechnen mit der Zeit".

Gruß
Jürgen

[pl]

Hi,

ich habe folgendes Problem/Herausforderung:

ich habe eine Datenbank abfrage die mir mehrere Elemente (ids, name, tage) ausgibt so wie ein "Start-Datum"

Jetzt möchte ich eine Liste anzeigen mit Name des Elements, Start Datum, Anzahl der Tage (über user Input veränderbar), End Datum

Das End Datum muss natürlich berechnet werden aus Start-Datum und Anzahl der Tage

Mit dem Datum rechnen wäre eine Sache für die Datenbank.

Irgendwie bekomme ich das nicht gebacken - bin allerdings auch kompletter javascript Neuling.

Wäre klasse wenn ihr mir helfen könntet

Bei was?

[JürgenB]

Hallo,

Mit dem Datum rechnen wäre eine Sache für die Datenbank.

man kann sicher mit auch dem Winkelschleifer Bleistifte anspitzen, vor allem wenn das Ding sowieso schon läuft. Ab soll ich deswegen extra in den Bastelkeller gehen?

Gruß
Jürgen

[Rolf b]

Man KANN Datumsrechnungen in der DB machen, wenn das Rechenergebnis denn Teil des Query-Ergebnisses ist. Aber der OP sagt doch, dass die Berechnung von der Reihenfolge seiner Zeilen abhängt, und die ist im Client veränderbar. Wegen einer Datumsarithmetik extra einen SQL Request zu machen - klar, geht, würde funktionieren, aber das ist dann der besagte Winkelschleifer. Aber das hast Du auch bestimmt nicht gemeint.

Das Wiki empfiehlt eine riskante Methode, Datumsrechnungen auf einem time_t-artigen Wert durchzuführen. Tagesaddition geht damit so:

function addDays(inputDate, numDays) {
   return new Date(inputDate.getTime() + numDays*24*60*60*1000);
}

Nur scheitert dieser Algorithmus an diesem einen Fünfundzwanzigstundentag, wo von Sommerzeit auf Winterzeit umgestellt wird. Das war dieses Jahr der 30.10., man gebe einmal in die Browser-Console

new Date( new Date(2016,9,30).getTime() + 24*3600000 )

ein (die Monate beginnen im Date-Kontruktor mit 0). Gut, wenn's nur um das Datum geht, könnte man zum Addieren von n Tagen einfach $$(n \cdot 24+1)\cdot 3600000$$ Millisekunden dazurechnen und den eventuellen Überschuss von einer Stunde ignorieren.

Ich finde aber, dass es so besser ist:

function addDays(inputDate, numDays) {
   return new Date(inputDate.getYear(), inputDate.getMonth(), inputDate.getDay() + numDays);
}

Man macht sich dabei zu Nutze, dass der Date-Kontruktor Grenzverletzungen bei den Eingabewerten klaglos akzeptiert. Der 32. Dezember ist der 1. Januar. Der -4. Dezember ist der 26. November. Und der 30. Februar ist der 1. oder 2. März, je nachdem, ob ein Schaltjahr ist oder nicht.

Wenn man die Zeit im Date-Objekt behalten will, müsste man den um die Zeitwerte erweiterten Konstruktor verwenden.

Rolf

[pl]

Man KANN Datumsrechnungen in der DB machen, wenn das Rechenergebnis denn Teil des Query-Ergebnisses ist. Aber der OP sagt doch, dass die Berechnung von der Reihenfolge seiner Zeilen abhängt, und die ist im Client veränderbar. Wegen einer Datumsarithmetik extra einen SQL Request zu machen - klar, geht, würde funktionieren, aber das ist dann der besagte Winkelschleifer. Aber das hast Du auch bestimmt nicht gemeint.

Das Wiki empfiehlt eine riskante Methode, Datumsrechnungen auf einem time_t-artigen Wert durchzuführen.

Wenn ich was empfehlen würde, sind es die Formeln von J.J. Scaliger zum Berechnen fortlaufender Tage. Diese Formeln hab ich auch schonmal in JS implementiert. Ebenso ist es auch kein Hexenwerk, die Tage zum Beginn bzw. Ende der Sommerzeit zu bestimmen, den Algorithmus findest Du durch Überlegung -- das wird nichteinmal ein Dreizeiler ;)

Sekunden-Timestamps sind fürs Rechnen mit dem Datum völlig ungeeignet.

[Rolf b]

Eben hast Du noch empfohlen, die Datumsarithmetik in der DB zu betreiben :)

Dass Sekundentimestamps die Arithmetik nicht leichter machen, ist fraglos richtig. Siehe die Falle, die ich aufgezeigt habe. Deswegen mache ich das in meinem Vorschlag ja auch anders. Dass die Date-Klasse intern Millisekundentimestamps verwendet, ist ein Implementierungsdetail und nach Möglichkeit nicht zu verwenden.

Scaliger macht's auch nicht einfacher, vor allem ist die Rückrechnung aus dem Julianischen Datum nicht ganz trivial.

Aber DST Regeln als Dreizeiler - das würde ich gerne sehen. Bitte international und aktuell!

Wie auch immer, selbstgemachte Datumsarithmetik kann nur eine Notlösung sein. Wenn die Runtime der Programmiersprache sie mitbringt, sollte man sie auch nutzen. Wobei ich nicht weiß, was JS so treibt, wenn der Browser auf einem arabischen, israelischen oder chinesischen Computer läuft und nichtgregorianische Kalender gelten....

Rolf

[JS_Neuling]

Wow,

die Diskussion geht irgendwie an mir vorbei - ist aber interessant...

Mir geht es nur um das reine Datum "2016-12-19" (ok, wäre ein extra Gimmick wenn mann noch den Wochentag - also Mo, Di, Mi, etc. - dazuschreiben könnte ;-) )

Und nein eine Datenbank Berechnung ist nicht gewünscht. Zum einen sollen die Elemten in der Reihenfolge verschiebbar sein, zum anderen können die Anzahl der Tage vom User verändert werden - klar könnte ich nach jeder Eingabe/Änderung ein DB Update machen und die Seite neu laden lassen, aber genau das wollte ich eigentlich vermeiden...

Bei mir scheitert es allerdings schon viel früher :-( Habe mir die Funktion die Jürgen verlinkt hat mal angeschaut und soweit verändert, dass sie meine Bedürfnissen genügen müsste (habe allerdings nicht auf Schaltjahre getestet).:

function datum_rechner(a, b){
var Tage = b;
var Zeit = new Date(a);
var AbsolutJetzt = Zeit.getTime();
var AbsolutDann = AbsolutJetzt + (Tage * 24 * 60 * 60 * 1000);
Zeit.setTime(AbsolutDann);
var Jahr = Zeit.getFullYear();
var Monat = Zeit.getMonth() + 1;
var Tag = Zeit.getDate();
return (Jahr + "-" + Monat + "-" + Tag);
}

Aber ich habe zwei/drei Probleme: a) wie bekomme ich das Anfangsdatum und die Zahl der Tage dynamisch in die Funktion (also ganz Grundlegende JS-Kenntnisse - interessanter Weise kann ich das return() auslesen, aber beim übergeben der Variablen an die Funktion scheitert es bei mir...)

b) Ausgabe des neuen Datums funktioniert, allerdings wie schaffe ich es, dass das Datum dann wieder als neues Anfangsdatum für die nächste Berechnung gelesen wird

c) Dann im nächsten Schritt wie kann ich das Ganze automatisieren, dass bei Änderungen (entweder Verschieben des Elements an eine neue Stelle oder Änderung der Anzahl der jeweiligen Tage) automatisch die Ganzereihe neu berechnet wird (auch das ist ein nice to have - wäre schon froh wenn ich die Berechnung mit einem onClick o.ä. hinbekommen würde ala Verschieben / Ändern -> Knopf drücken um neu zu berechnen)

Grüße Walter

[dedlfix]

Tach!

Habe mir die Funktion die Jürgen verlinkt hat mal angeschaut und soweit verändert, dass sie meine Bedürfnissen genügen müsste (habe allerdings nicht auf Schaltjahre getestet).:

Wenn du mit einem DateTime-Typ arbeitest, so wie es in Javascript der Fall ist, also nicht nur Date ohne Time, dann hast du das Problem, wenn du 0 Uhr nimmst, dass es beim Vorwärts- und Rückwärtsrechnen über den Zeitumstellungstag mal 23 Uhr und mal 1 Uhr wird. Nimm lieber 12 Uhr als Basis, dann pendelst du zwischen 11 und 13 Uhr, bist also immer im selben Tag.

a) wie bekomme ich das Anfangsdatum und die Zahl der Tage dynamisch in die Funktion (also ganz Grundlegende JS-Kenntnisse - interessanter Weise kann ich das return() auslesen, aber beim übergeben der Variablen an die Funktion scheitert es bei mir...)

Dann solltest du erstmal Grundlagen lernen.

b) Ausgabe des neuen Datums funktioniert, allerdings wie schaffe ich es, dass das Datum dann wieder als neues Anfangsdatum für die nächste Berechnung gelesen wird

Gib das Datum als Datum und nicht als String zurück. Die Stringdarstellung kannst du außerhalb machen. Schreibe Funktionen so, dass kein "und" in ihrer Funktionsbeschreibung vorkommt. "Die Funktion berechnet das Zieldatum und formatiert es." Lass den zweiten Teil raus aus der Funktion. Schreib dafür gegebenenfallse eine separate Funktion.

c) Dann im nächsten Schritt wie kann ich das Ganze automatisieren, dass bei Änderungen (entweder Verschieben des Elements an eine neue Stelle oder Änderung der Anzahl der jeweiligen Tage) automatisch die Ganzereihe neu berechnet wird (auch das ist ein nice to have - wäre schon froh wenn ich die Berechnung mit einem onClick o.ä. hinbekommen würde ala Verschieben / Ändern -> Knopf drücken um neu zu berechnen)

"Dynamisch" und "automatisch" haben beim Programmieren keine Bedeutung. Du musst dir die Schritte überlegen, wie man zum Ziel kommt, und dann den Code dazu ausformulieren.

dedlfix.

[JS_neuling]

Dann solltest du erstmal Grundlagen lernen.

Tach auch, da hast Du wohl recht... bin auch schon wieder ein Stück weitergekommen - allerdings ist es sehr mühsam, da ich noch kein Error Reporting ala php gefunden habe. Sprich ich probiere etwas und es geschieht nichts -- ich weiß aber nicht habe ich irgendwo einen Syntaxfehler, ein Komma oder Klammer vergessen, eine Variable falsch definiert oder schlicht und ergreifend Blödsinn geschrieben. Gibt es in Javascript so ein Error Reporting ohne dass man irgendwas zusätzlich installieren muss?

Grüße

[JürgenB]

Hallo,

such mal in deinem Browser die Entwicklerwerkzeuge, und da die Fehler- oder Javascriptkonsole. Die sind serienmäßig an Bord.

Gruß
Jürgen

[pl]

Aber DST Regeln als Dreizeiler - das würde ich gerne sehen.

Als Einzeiler für unsere Zeitzone: Du ziehst einfach den numerischen Wochentag von 31 ab und erhältst das Datum für den letzten Sonntag. Also wenn z.B. der numerische Wochentag für den 31. ein Donnerstag (4) ist, rechnest Du 31 - 4 und kommst so auf den 27.

Nur wenn der 31. auf einen Sonntag fällt, darfst Du nicht 7 abziehen ;)

Bitte international und aktuell!

Musste halt die Regln kennen.

Wie auch immer, selbstgemachte Datumsarithmetik kann nur eine Notlösung sein.

J.J. Scaliger. Badische Landesbibliothek... nichts geht über ein gute Buch (Titel leider vergessen).

[Ronald Schaukrug]

Ich finde aber, dass es so besser ist:

function addDays(inputDate, numDays) {
   return new Date(inputDate.getYear(), inputDate.getMonth(), inputDate.getDay() + numDays);
}

Was heisst hier "besser"? Das ist das was funktioniert. Alles andere sind Krücken.

Ronald Schaukrug

[JSneuling]

function addDays(inputDate, numDays) {
   return new Date(inputDate.getYear(), inputDate.getMonth(), inputDate.getDay() + numDays);
}

Das ist das was funktioniert. Alles andere sind Krücken.

Ronald Schaukrug

Ok, ich gebe auf... wenn ich versuche diese Funktion zu nehmen bekomme ich gar nichts ausgegeben, weiß aber nicht wo mein Fehler liegt - wenn ich auf die gleiche Weise das andere Script teste (siehe ein paar Posts weiter oben) bekomme ich zumindest eine Ausgabe. Teste das Ganze auf jsfiddle:

im HTML Teil habe ich

<p id="output"></p>

im javascript Teil:

function addDays(inputDate, numDays) {
   return new Date(inputDate.getYear(), inputDate.getMonth(), inputDate.getDay() + numDays);
}
var x = addDays('2015-10-09','12');
document.getElementById("output").innerHTML = x;

wo liegt mein Fehler? Ist das Datumsformat falsch (warum klappt es dann in dem anderen Script)? wenn ich für x einen festen Wert eingebe (var x = 'neuer Text') wird mir das ausgegeben, also gehe ich davon aus, dass ich die Funktion falsch habe bzw. das return falsch interpretiere...

Grüße

[JürgenB]

Hallo,

<p id="output"></p>

im javascript Teil:

function addDays(inputDate, numDays) {
   return new Date(inputDate.getYear(), inputDate.getMonth(), inputDate.getDay() + numDays);
}
var x = addDays('2015-10-09','12');
document.getElementById("output").innerHTML = x;

ich habe die Funktion mal etwas überarbeitet:

function addDays(dd, numDays) {
   var inputDate = new Date(dd);
   return new Date(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate() + numDays);
}
var x = addDays('2015,10,09',12);
document.getElementById("output").innerHTML = x;

der Übergabestring mit dem Datum wird erst noch in ein Date-Objekt umgewandelt, und zum Rechnen habe ich getDay durch getDate ersetzt.

Gruß
Jürgen

[JSneuling]

ich habe die Funktion mal etwas überarbeitet:

function addDays(dd, numDays) {
   var inputDate = new Date(dd);
   return new Date(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate() + numDays);
}
var x = addDays('2015,10,09',12);
document.getElementById("output").innerHTML = x;

Hallo Jürgen, tausend Dank! Ok mit den "fixen Variablen" funktioniert es, wenn ich allerdings die Variablen aus Input Feldern auslese bekomme ich "Invalid Date" als Rückgabe - oder eine falsche Berechnung - vielleicht kannst Du mir ja nochmal helfen. Habe im Input Feld verschiedene Datum-Formate ausprobiert, auch mit Komma wie in deinem Script.

<p>
<input type="date" id="datum" value="2015-10-02" />
</p>
<p>
<input type="number" id="tage" value="10" />
</p>
<p id="output"></p>

var a = document.getElementById("datum").value;
var b = document.getElementById("tage").value;
//version1:
var x = addDays(a,b); //Ausgabe: Wed Apr 27 2016 00:00:00 GMT+0200
//version2:
var x = addDays('a',b); // Invalid Date (auch wenn ich 'a','b' schreibe, oder a,'b'
//version3: 
var a = new Date(document.getElementById("datum").value); //Ausgabe: Wed Apr 27 2016 00:00:00 GMT+0200

Ich habe mir auch schon jeweils die Variablen a und b ausgeben lassen um zu sehen, ob da der Fehler liegt, scheint aber ok... Was übersehe ich / beachte ich nicht?

Grüße

[JürgenB]

Hallo,

function addDays(dd, numDays) {
   var inputDate = new Date(dd);
   return new Date(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate() + numDays);
}
var x = addDays('2015,10,09',12);
document.getElementById("output").innerHTML = x;

<p>
<input type="date" id="datum" value="2015-10-02" />
</p>
<p>
<input type="number" id="tage" value="10" />
</p>
<p id="output"></p>

var a = document.getElementById("datum").value;
var b = document.getElementById("tage").value;
//version1:
var x = addDays(a,b); //Ausgabe: Wed Apr 27 2016 00:00:00 GMT+0200

der Value eines Input-Elements ist ein String, zum Rechnen benötigst du aber eine Zahl. Bei Strings werden mit dem +-Operator die Strings aneinander gehängt, also "a"+"b" -> "ab"

var a = document.getElementById("datum").value;
var b = parseInt(document.getElementById("tage").value);
//version1:
var x = addDays(a,b); //Ausgabe: Mon Oct 12 2015 00:00:00 GMT+0200

Ich habe hier die Methode parseInt eingefügt.

Gruß
Jürgen

[Rolf b]

var x = addDays('2015,10,09',12);

Unabhängig von der Diskussion um die Funktion an sich: Chrome versteht die Kommas, Internet Explorer (11) nicht. ISO-8601 empfiehlt das Minus zwischen Datumsteilen und den Doppelpunkt zwischen Zeitteilen. Punkt oder Komma soll man eigentlich nur vor den Dezimalstellen der Sekunde verwenden. War bestimmt nur ein Tippfehler ;-)

Rolf

[JürgenB]

Hallo Rolf,

var x = addDays('2015,10,09',12);

Unabhängig von der Diskussion um die Funktion an sich: Chrome versteht die Kommas, Internet Explorer (11) nicht. ISO-8601 empfiehlt das Minus zwischen Datumsteilen und den Doppelpunkt zwischen Zeitteilen. Punkt oder Komma soll man eigentlich nur vor den Dezimalstellen der Sekunde verwenden. War bestimmt nur ein Tippfehler ;-)

ich habe beides getestet: "2015-10-02" und "2015,10,02" und nicht weiter drüber nachgedacht.

Gruß
Jürgen

[Rolf b]

Und ich arme Socke, die dienstlich pflichtweise den IE 11 benutzen muss, bin über die Häkchen am Komma gepurzelt. Ich weiß, caniuse behauptet, dass der IE nur noch 3,7% Marktanteil hätte. Aber vielleicht zählen die ja die ganzen Intranets nicht mit, die von irgendwem auf IE optimiert wurden....

[Gunnar Bittersmann]

@@Rolf b

Und ich arme Socke, die dienstlich pflichtweise den IE 11 benutzen muss, bin über die Häkchen am Komma gepurzelt. Ich weiß, caniuse behauptet, dass der IE nur noch 3,7% Marktanteil hätte.

Marktanteil hin oder her, es ist immer™ gut, sich an Standards zu halten. (Die Standarten dafür hochzuhalten. ;-)) Und der Standard sagt nun mal '-' als Trennzeichen.

Was übrigens kein Minus ist – außer für hornbebrillte Nerds. ;-)

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Was übrigens kein Minus ist – außer für hornbebrillte Nerds. ;-)

oder für behornbrillte Nerds?

Bis demnächst
Matthias

[Rolf b]

Ja, hast recht. Ein Minus wäre der hier: „−“, bestenfalls noch der: „➖“. Der hier „-“ ist nur eine Krücke und verdient nicht den Namen "Minus". Alles nicht zu verwechseln mit dem „‐“ oder dem „‑“. ¡Ganz zu schweigen von ‒, –, — oder gar ― !‼❗

Aber eigentlich ist mir das ja sowas von schnurz… und eine Hornbrille hab ich nicht!

😉 Rolf

[Rolf b]

NEIN!

Die addDays Funktion, die ich vorgeschlagen habe, hat ein Date Objekt erwartet und ein Date-Objekt zurückgeliefert. Das sollte man nicht ändern. Sie hatte allerdings einen Bug - ich habe getYear verwendet, das ist natürlich Quark, es muss getFullYear heißen, sonst verbrasselt man die Jahrhundertangabe.

Eine addDays Funktion, die einen String erwartet und ein Date Objekt zurückliefert, hat üblen Design-Geruch (Separation of Concerns wird verletzt). Sowas sollte man keinesfalls empfehlen.

Die Konvertierung eines Strings in ein Date ist eine Sache, die von addDays unabhängig benötigt wird und darum unabhängig codiert sein muss. Die Implementierung dieser Konvertierung hängt sehr am Eingabeformat, der Date-Konstruktor ist dazu meinstens ungeeignet, denn er versteht eigentlich nur ISO 8601 ("YYYY-MM-DDTHH:mm:ss.sssZ") und wenn's das nicht ist, probiert er es bei manchen Browsern noch mit "MM-DD-YYYY", gerne auch "MM.DD.YYYY". Aber niemals "DD.MM.YYYY". Das muss jede/jeder selber so umsetzen, wie es gebraucht wird. Oder eine JS-Library einsetzen (man suche nach javascript date library und wird zugeworfen).

Dass ein JS-Neuling darüber erstmal stolpert, ist keine Schande. Es ist eher eine, dass ich auf das erwartete Date-Objekt als Eingabe nicht hingewiesen habe.

Rolf

[JürgenB]

Hallo Rolf,

Eine addDays Funktion, die einen String erwartet und ein Date Objekt zurückliefert, hat üblen Design-Geruch (Separation of Concerns wird verletzt). Sowas sollte man keinesfalls empfehlen.

stimmt, ich habe an der falschen Stelle korrigiert, hier noch mal ein Versuch:

function addDays(inputDate, numDays) {
    return new Date(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate() + numDays);
}

var a = new Date(document.getElementById("datum").value);
var b = parseInt(document.getElementById("tage").value);
//version1:
var x = addDays(a,b);

Gruß
Jürgen

[JS_neuling]

Hallo Jürgen, halle Rolf, SUPER TAUSEND DANK!!!

Auf zu neuen Problemen ;-)

muss als nächstes rausfinden wie ich die Berechnung auslöse - also nicht bei Seitenstart sondern mit einem Button / Submit (onClick oder OnChange falls es das gibt) und dann wie ich das Ganze in Serie mache.

Ist es z.B. möglich eine Id mit mehreren Instanzen zu haben also z.B. <input type="date" id="datum[]" value="" /> - muss ich diese Instanzen durchnummerieren (datum[0] datum[1], etc.) oder passiert das automatisch (wäre schön, da die erste Reihenfolge via PHP generiert wird aber die Elemente in der Reihenfolge durch den User geändert werden kann...)?

beim Abrufen dann einfach:

var a = new Date(document.getElementById("datum[]").value);

der eine

for($i=0, i<Anzahl der Instanzen, $i++;) { var a = new Date(document.getElementById("datum[$i]").value); $i++; }

(Habe mir die richtige Javascript Syntax dazu noch nicht angeschaut mach ich noch - geht mir um das Prinzip

So viele Fragen, so viel zu lernen... Auf alle Fälle nochmal danke für eure Hilfe und Geduld!

[Rolf b]

Hallo JSN,

eine Array-ID gibt es in Javascript nicht. Sowas kannst Du bei einem PHP Post machen, der baut dann ein Array auf. Die Frage ist aber, ob Du ein Array-artiges ID Element überhaupt brauchst.

Die Input-Felder haben ein change Event, auf das Du dich registrieren kannst. Dieses Event blubbert nach Auslösung hoch, d.h. du musst es nicht pro Input-Event registrieren, sondern kannst es einmalig auf einem Container darüber registrieren. Das Event-Objekt, das Du dann bekommst, hat ein target-Attribut, das dir das eigentliche Element gibt in dem die Änderung stattfand.

Hast Du eigentlich mal eine Beschreibung deines GUI - oder ein Fiddle oder einen CodePen dazu? Mich würde nämlich interessieren, welche Felder genau du anzeigst und wie Du das "nach oben/nach unten" dem Benutzer anbietest. Drag&Drop ist's bestimmt nicht, gelle?

Und: arbeitest Du mit dem nackten Hintern auf dem glühenden Metall oder polsterst Du Dich mit ein paar Helper-Bibliotheken?

Rolf

[Rolf b]

Ich habe seit dem letzten Beitrag etwas gespielt. Es ist sicher nicht unbedingt vorbildlicher Code, aber ein paar Ideen kannst Du dir daraus bestimmt holen und die weniger vorbildlichen Teile werden mir die netten Kollegen schon um die Ohren hauen.

Ich habe nur das Ändern der Tage an einem Eintrag realisiert, das Auf/Abschieben eines Eintrags bleibt dann als einfache Übung für den Leser :)

JavaScript-Libraries jeglicher Art habe ich weggelassen. Mit knockout.js wäre das Mapping der Liste zur Table viel netter, aber dann müssten wir erstmal einen Exkurs ins MVVM Konzept fliegen...

Fiddle

[JSneuling]

Fiddle

Wie geil ist das denn! Habe gerade ein bisschen mit dem Fiddle rumexperimentiert - wow, genau das was ich gesucht habe! Werde mir heute abend den Code mal genauer zu Genüte führen und schauen ob ich alles verstehe. Freue mich schon darauf, dass in mein Script einzuarbeiten und entsprechend anzupassen (wenn ich es habe - mache ich einen Fiddle und poste den hier wieder). Hey TAUSEND DANK Du hast mir extrem weitergeholfen - und viel beigebracht! DANKE!

[JSneuling]

zu früh gefreut... habe gestern abend versucht das Script an mein Script anzupassen und auf JSfiddle hat auch alles funktioniert - nur sobald ich das als Website testen will wird der Javascript Code nicht ausgeführt. Habe es dann mit dem unbearbeiteten Code versucht und das das gleiche Ergebnis. Wenn ich die Seite lade wird mir nur der Tablehead angezeigt und dann nichts mehr. Wenn ich dann die JS-Konsole aufrufe und das Script rein kopiere und auf ausführen klicke läuft das Script (beide Versionen) wie vorgesehen. Vermute ich mache was falsch beim Einbinden in die Seite - allerdings laufen andere Scripts ohne Probleme bei gleicher Methode (<script>CODE</script> - das Ganze im <head> der Datei.

Irgendeine Idee in welche Richtung ich Suchen könnte um das Problem zu lösen?

Grüße

[JürgenB]

Hallo,

Irgendeine Idee in welche Richtung ich Suchen könnte um das Problem zu lösen?

eine Vermutung:

das Script greift auf HTML-Elemente zu (getElement...). Wenn das Script im Seitenkopf steht, wird es abgearbeitet, bevor die HTML-Elemente angelegt sind. Abhilfe wäre, das Script ans Ende des body-Elements oder in einen DOMContentLoaded-Eventhandler zu setzen. Ein Blick in die Fehlerkonsole hätte dir eine entsprechende Meldung zeigen müssen.

Gruß
Jürgen

[JSneuling]

eine Vermutung:

das Script greift auf HTML-Elemente zu (getElement...). Wenn das Script im Seitenkopf steht, wird es abgearbeitet, bevor die HTML-Elemente angelegt sind. Abhilfe wäre, das Script ans Ende des body-Elements oder in einen DOMContentLoaded-Eventhandler zu setzen. Ein Blick in die Fehlerkonsole hätte dir eine entsprechende Meldung zeigen müssen.

Gruß
Jürgen

Hallo Jürgen hatte schon versucht das Script am Anfang des <body> Elements zu plazieren - hat nichts gebracht, werde es am Ende versuchen (kann leider erst heute abend wieder daran basteln - bis dahin werde ich mal über "DomContentLoaded" nachlesen). Fehlerkonsole hat bei meiner bearbeiteten Version ein "undefinded Object" ausgegeben (ist aber trotzdem gelaufen), bei Deiner Version gab es keine Ausgabe.

Melde mich wieder ;-)

[JürgenB]

Hallo,

hatte schon versucht das Script am Anfang des <body> Elements zu plazieren - hat nichts gebracht,

natürlich nicht, denn da wird es ja auch abgearbeitet, bevor die HTML-Elemente da sind.

Gruß
Jürgen

[JS_neuling]

Hallo Jürgen, wollte nur kurz vermelden - es funktioniert wenn das Script am Ende des Bodys steht! Super!

Bin noch am basteln und probiere gerade einen eventListener so einzubauen, dass ich das Start_Datum in einem Eingabefeld ändern kann und dann die Berechnung neu durchgeführt wird. Mal schauen ob ich das heute noch hinbekomme.

Grüße

[JS_neuling]

He, he hat geklappt! Danke für das ausführliche Tutorial - jetzt zum nächsten Problem...

[pl]

Ich finde aber, dass es so besser ist:

function addDays(inputDate, numDays) {
   return new Date(inputDate.getYear(), inputDate.getMonth(), inputDate.getDay() + numDays);
}

Was heisst hier "besser"? Das ist das was funktioniert.

Fachlich möglicherweise richtig.

Alles andere sind Krücken.

Was machste, wenn der Kunde die Mondphasen dazu haben will? Oder Feiertage von - bis? Dann fängste nämlich wieder von vorne an und hast jede Menge redundanten Code. Deswegen ist es eben doch besser, von Anfang an mit fortlaufenden Tagen zu rechnen. Modulo 7 gibt den Wochentag und Tage addieren wird zu einem x plus y ist gleich Datum. Beginn, Ende DST berechnen reduziert sich ebenfalls auf eine Subtraktion und wenn Date ein Objekt des heutigen Tages ist, ist Date++ das Datum von morgen.

Und Deine Vorgehensweise ist Schnee von gestern ;)