{"id":552,"date":"2019-09-10T17:01:13","date_gmt":"2019-09-10T15:01:13","guid":{"rendered":"https:\/\/ekiwi.de\/?p=552"},"modified":"2019-09-10T17:01:13","modified_gmt":"2019-09-10T15:01:13","slug":"datumvergleich-mit-java-script","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/552\/datumvergleich-mit-java-script\/","title":{"rendered":"Datumvergleich mit Java-Script"},"content":{"rendered":"<p>In diesem Artikel wollen wir zwei Daten miteinander vergleichen. Im Beispiel wollen wir die Eingabe in einem Formular \u00fcberpr\u00fcfen, ob ein Datum vor dem zweiten Datum liegt.<\/p>\n<p><!--more--><\/p>\n<p><iframe loading=\"lazy\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/qWu5Tvr6kFE\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Schauen wir unser Beispielformular an:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/09\/date_vergleich_1.png\" alt=\"\" width=\"603\" height=\"519\" class=\"aligncenter size-full wp-image-553\" srcset=\"\/wp-content\/uploads\/2019\/09\/date_vergleich_1.png 603w, \/wp-content\/uploads\/2019\/09\/date_vergleich_1-300x258.png 300w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><\/p>\n<p>Zwei Eingabefelder, Anreise und Abreise. Das Formular mit Datumauswahlfeld wurde mit unserer Software <a href=\"https:\/\/da-software.de\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener noreferrer\">DA-FormMaker<\/a> erstellt. Der gesamte Code im Beispiel funktioniert nat\u00fcrlich auch in jedem anderen Formular.<\/p>\n<p>Das erste Problem bei der \u00dcberpr\u00fcfung ist die Umwandlung des Datumformats. Es gibt eine Funktion des Date-Objekts, welches ein String-Datum in ein Date-Objekt parsen kann.<\/p>\n<pre>\r\nvar d1 = Date.parse(\"2019-11-01\");\r\nvar d2 = Date.parse(\"2019-11-04\");\r\nif (d1 < d2) {\r\n    alert (\"Fehler!\");\r\n}\r\n<\/pre>\n<p>Allerdings sieht man hier bereits, dass das Format des Datums nicht mit unserem \u00fcbereinstimmt. W\u00fcrden wir nun einfach unser Datum parsen, w\u00fcrde ein ung\u00fcltiges Date-Objekt herauskommen.<\/p>\n<p>Abhilfe schafft eine zus\u00e4tzliche Bibliothek \"<a href=\"https:\/\/momentjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">moment.js<\/a>\".<\/p>\n<p>Diese erlaubt uns Strings flexibler als Datum zu parsen. Zuerst m\u00fcssen wir die Java-Script-Bibliothek einbinden:<\/p>\n<pre>&lt;script src=&quot;moment.js&quot;&gt;&lt;\/script&gt;<\/pre>\n<p>Anschlie\u00dfend k\u00f6nnen wir die beide Datenfelder auslesen:<\/p>\n<pre>\r\nvar dateAnreise = moment(document.forms[\"DAFORM\"].Anreise.value, \"DD.MM.YYYY\");\r\nvar dateAbreise = moment(document.forms[\"DAFORM\"].Abreise.value, \"DD.MM.YYYY\");\r\n<\/pre>\n<p>Der Funktion \"moment\" wandelt uns die beiden Eingabefelder des Formulars in Date-Objekte um. Anschlie\u00dfend k\u00f6nnen wir den Vergleich machen:<\/p>\n<pre>\r\nif (dateAbreise &lt; dateAnreise) \r\n{\r\n    alert (&quot;Fehler: Abreise liegt vor der Anreise&quot;);\r\n    return false;\r\n}\r\n<\/pre>\n<p>Es wird nun \u00fcberpr\u00fcft, ob das Datumfeld f\u00fcr die Abreise gr\u00f6\u00dfer, also nach, als das Anreisedatum ist. Ansonsten wird ein Fehler ausgegeben. False geben wir zur\u00fcck, da die \u00dcberpr\u00fcfung beim Absenden des Formulars stattfindet.<\/p>\n<p>Das Ergebnis ist eine Fehlermeldung, wenn dies der Fall ist:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/09\/date_vergleich_2.png\" alt=\"\" width=\"292\" height=\"213\" class=\"aligncenter size-full wp-image-554\" srcset=\"\/wp-content\/uploads\/2019\/09\/date_vergleich_2.png 292w, \/wp-content\/uploads\/2019\/09\/date_vergleich_2-90x65.png 90w\" sizes=\"auto, (max-width: 292px) 100vw, 292px\" \/><\/p>\n<p>Die \u00dcberpr\u00fcfung hat ein Problem, sofern der Anwender nichts oder ein ung\u00fcltiges Datum eintr\u00e4gt. Daher erweitern wir die \u00dcberpr\u00fcfung:<\/p>\n<pre>\r\nif (isNaN(dateAnreise))\r\n{\r\n    alert (&quot;Bitte ein g\u00fcltiges Datum in Anreise festlegen.&quot;);\r\n    return false;\r\n}\r\n<\/pre>\n<p>Der Coded \u00fcberpr\u00fcft, ob der Text des Eingabefeldes in ein g\u00fcltiges Datumformat umgewandelt werden kann. Falls nicht, erscheint ein Fehler.<\/p>\n<p>Das wars! Mit \"moment.js\" haben wir das Handling mit Daten deutlich vereinfacht.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2019\/09\/date_vergleich.zip\">Download des Beispiels<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>In diesem Artikel wollen wir zwei Daten miteinander vergleichen. Im Beispiel wollen wir die Eingabe in einem Formular \u00fcberpr\u00fcfen, ob<\/p>\n","protected":false},"author":1,"featured_media":217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15,13],"tags":[44],"class_list":["post-552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-programmierung","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=552"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/217"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}