Datumabfrage überprüfen mit Javascript

[C4non]

Bevor ihr auf mich los geht. Ich bin was das Thematik angeht ein totaler neuling.

Ich habe ein einfaches Formular erstellt und ein Kalender eingebunden mit "type=date". Jetzt möchte ich mittels Javascript verhindern das ein Datum in der Vergangenheit ausgewählt wird. Wie gehe ich da vor, den meine Überlegungen funktionieren nicht.

 

[FranzvonAssisi]

Joah, fast richtig

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date/now

Lg

 

[Sithys]

Die Funktion DatumCheck() wird doch gar nicht aufgerufen?!

 

[C4non]

Ich glaube das ist mein Problem, herraus zu finden wie ich das eingegebene Datum abrufen kann. Ich weiß nicht wie ich das "verbinden soll".

 

[nazdun]

Als Alternative haben inputs auch ein min Attribut - damit kann man einschränken welcher Datumsbereich ausgewählt werden kann. Das kann man auch mittels JavaScript setzen.

https://www.w3schools.com/tags/att_input_min.asp

 

[C4non]

Ziel ist das wenn man eine neue Season starten will, die nicht in der Vergangenheit lieg. Mehr eigentlich auch nicht, aber irgendwie habe ich gerade damit echt ein Problem das zu verstehen wie und was

 

[Sithys]

@nazdun hats doch auf den Punkt gebracht... nutz einfach min und max, das müsste beim Datum gehen. Min kannste über das two way databinding von angular doch einfach auf date now setzen.

 

[Andreas_]

Er benutzt ja einen Kalender für die Datumsauswahl. In der Regel erlauben die eine Einschränkung der Auswahlmöglichkeiten, so dass eine Überprüfung innerhalb des Formulars überflüssig ist. Das kann der Kalender in der Regel gleich mit erledigen.

 

[Sithys]

https://material.angular.io/components/datepicker/overview

 

[pcBauer]

min und max sind die besten Anlaufstellen, da es eben nativ in HTML integriert ist, wenn es damit geht, dann damit.

Ansonsten sollte man bei angular einen validator schreiben, der den ngModel direkt prüft, damit der Eintrag im Formular (das deinen gezeigten Code vermutlich wrappt?) als invalid markiert würde und man das sowohl prüfen kann vor absenden als auch anzeigen, dass ein Fehler vorliegt (das geht auch direkt am Eingabefeld, je nachdem wie man das präferiert).
Was mich aber wundert, dass du ausgerechnet bei Angular nicht weißt, wie du den Wert prüfst, zugreifen auf ihn kannst du natürlich in deiner Component-Class, du hast ja selbst das ngModel auf datetime gebunden.
Ist denn da nur ein Datepicker oder auch (oder nur) Ein Eingabefeld für das Datum? Bei Eingabefeldern kann man das min auch immer mal überlisten, dann bräuchtest du wie gesagt einen custom validator.
Es gibt zwar diverse Wege das zu lösen, aber je nach Anwendungsfall empfiehlt sich meist eine Variante.

tl;dr:
Willst du immer sofort auf Gültigkeit abprüfen, validiere es mit min, wenn du es nur beim Absenden prüfen willst, checke beim Absenden den Wert und geb dann eine Fehlermeldung aus.

Ergänzung: min und max sind auch in Angular intregrierte Validatoren, die mit inputs umgehen können, aber in normaler Verwendung wie erwähnt Standard-HTML Validatorattribute.

So genug auf dich losgegangen
Hoffe das hilft mehr als das es verwirrt.

PS: Angular Material ist in der Tat ein schönes UI Framework, aber das mit Bootstrap zu mischen (deinem HTML nach zu urteilen) scheint bedingt sinnvoll zu sein, und auch dort muss man validieren, weil man ins Eingabefeld erstmal beliebige Werte eintragen / einfügen kann, und man muss noch Acht auf die Formatierung (= Lokalisierung) geben..

 

[C4non]

Danke erstmal. Ich bin leicht verwirrt. Viel Input in einer Woche.

Ergänzung (27. Februar 2019)

Nachtrag:


Ich hab mich leider etwas unglücklich ausgedrückt. Es soll erst nachdem das ganze Formular ausgefüllt wird überprüft werden. Ich weiß nicht warum, aber ich tu mich heute echt schwer

 

[ayngush]

Was du suchst ist ein Input bzw. Form Validator. Und genau davon würde ich was fertiges nehmen und gut ist. Ich verwende zum Beispiel noch das Ding: http://www.formvalidator.net/ in einer Anwendung, ansonsten kann man sich da auch was eigenes in JavaScript zusammen bauen.

Ein absoluter "must have" mindeststandard bei JavaScript und Datum / Uhrzeit Dingen ist übrigens die Lib https://momentjs.com/

 

[pcBauer]

In deiner xyz.component.ts:

// Die Benennung darf ruhig von Anfang an sprechend sein ;)
submitNewSeason() {
    // Daten vergleichen, gibt ja keine Notwendigkeit das aktuelle Datum zwischenzuspeichern
    // ich schätze, this.datetime ist ein Datumsobjekt, gegebenfalls muss hier die Bedingung noch angepasst werden
    if (this.datetime.value < Date.now()) {
        alert("Datum darf nicht vor heute liegen!");
    } else {
        this.http
            .post('/data/season', {BetaSeason:this.betaSeason,Datetime:this.datetime,MatchDayInterval:this.matchDayInterval,
MatchDaysAmount:this.matchDaysAmount})
            .subscribe();
    }
}

Das ist aber wirklich nur die direkteste Lösung für dein Problem und würde ich so nicht implementieren (siehe Anmerkungen unten und Kommentare der Anderen).
Aber um dich nicht gänzlich zu überfordern - was bei Angular am Anfang eben gut passieren kann, wenn jeder dir was Anderes an den Kopf wirft - sollte es diese Lösung tun.

Anmerkungen (optional zum Erweitern deines Wissens):

• Ein Validator an dem Eingabefeld ist besser, weil man dann wie erwähnt das Formular selbst auf Gültigkeit prüfen kann, so geht's eben nur händisch und einzeln. Zudem bekommt der User eben erst später Feedback, ihn erst gar keine fehlerhaften Daten eingeben zu lassen wäre besser.
• Man könnte auch für einfacheres Debugging die Daten im ISO-Format vergleichen, funktioniert meines Wissens auch als String, da die Formatierung eben genau richtig ist für einen Vergleich und etwas menschenlesbareres schadet nicht, wenns keine Nachteile gibt (Laufzeit würde sich wohl unrelevant verschlechtern). wäre dann if (this.datetime.toISOString() < (new Date()).toISOString()) { statt der einfachen Variante oben. Ja, viele Klammern, dann kann man das new Date() auch noch in eine Variable zwischenspeichern, dann wirds besser.
• Deine geschickten Daten kannst du auch mit lowercase im ersten Buchstaben senden, da meines Wissens Angular das sowieso konvertiert, mindestens wenn du den HttpClient verwendest:

this.http
    .post(
        '/data/season',
        {
            betaSeason: this.betaSeason,
            datetime: this.datetime,
            matchDayInterval: this.matchDayInterval,
            matchDaysAmount: this.matchDaysAmount
        }
    )
    .subscribe();

Das erhöht die Lesbarkeit nochmal
-Alle Anmerkungen spiegeln nur meine Meinung wieder, diese Punkte halte ich für best practice, das mögen andere anders sehen

 

[DubZ]

seit html5 gibt es jede Menge Standard Validierungsmöglichkeiten. Für Datum u.a min und max.

Unten ein Beispiel welches so funktionieren müsste.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form action="#">
    Gib ein Datum vor dem heutigen Tag ein:<br />
  <input type="date" id="meinDatum"><br />
  <input type="submit">
</form>

<script>
    var datum = new Date();
    var heute = datum.getFullYear() + "-" + ("0" + (datum.getMonth() + 1)).slice(-2) + "-" + ("0" + datum.getDate()).slice(-2);
    document.getElementById("meinDatum").setAttribute("min", heute);
</script>
</body>
</html>

Trotzdem: validiert wird sowohl Clientseitig (Javascript) als auch Serverseitig (PHP, Java, Python, Ruby...) um sich vor ein paar tollen Hackern zu schützen Denn so ein Formular ist schnell nachgebaut.