html input Vorlage für Datum-Eingabe

  • HTML

Es gibt 2 Antworten in diesem Thema. Der letzte Beitrag () ist von Manü.

    html input Vorlage für Datum-Eingabe

    Ahoi,

    ich finde gerade die richtige Möglichkeit nicht, also muss ich mal nachfragen. Via ASP.NET MVC4 erstelle ich eine aspx und möchte da ein input erstellen, welches nur die Eingabe eines Datum zufällst. type="date" habe ich natürlich versucht, aber das frisst der FF und der IE nicht.

    Es wäre wirklich schön, wenn mir da einer weiter helfen könnte.
    Grüße Manu

    Was Gott dem Menschen erspart hat, kann der Computer.
    Billy ©, (*1932), Schweizer Aphoristiker
    Quelle: www.Aphorismen.de

    Hi,

    einen Dialog (ein <div>) kannst du ja ohne Weitere Anzeigen, indem du das an einem Event festmachst. Beispiel jQuery:
    $('#meine_datum_textbox').focus(function(){ $('#mein_div').toggle(); });
    In deinem HTML könnte es so ausschauen:

    HTML-Quellcode

    1. <input type="text" id="meine_datum_textbox">
    2. <div id="mein_div" hidden>
    3. <input type='text' id='datum_tag' placeholder='Tag'>
    4. <input type='text' id='datum_monat' placeholder='Monat'>
    5. <input type='text' id='datum_jahr' placeholder='Jahr'>
    6. <input type="button" id="verwenden" value="OK" onClick="$('#meine_datum_textbox').attr('value', $('#datum_tag').attr('value') + '.' + $('#datum_monat').attr('value') + '.' + $('#datum_jahr').attr('value'));">
    7. </div>


    Wenn das Textfeld den Fokus erhält, poppt das <div> auf (in CSS machst du das noch so dass es gut ausschaut). Das ist halt nur, damit der Benutzer keine andere Möglichkeit hat, als das Datum korrekt einzugeben.

    Alternativ könntest du auch auf das keyUp()-Event der Textbox reagieren und jeweils prüfen, ob die Eingabe dem regulären Ausdruck ^([0-9]{2}\.[0-9]{2}\.[0-9]{4}|[0-9]{4}\-[0-9]{2}\-[0-9]{2})$ entspricht (bedeutet z.B. das Datumsformat "26.05.2015" ist ebenso gültig wie "2015-05-26"). Falls nicht, könntest du die Schriftfarbe auf Rot ändern oder ähnliches.

    Natürlich prüfst du das serverseitig nochmals.

    Link :thumbup:
    Hello World

    Danke für die Antwort, den Lösungsansatz finde ich auch nicht übel.

    Durch etwas hin und her, ist mir nun auch klar geworden, was ich wirklich will xD
    Es ging mir dabei eher um eine MaskedTextbox im Format __.__.____
    die jeweilige JQuery Funktionen gibt es ja hier
    Auch die Lösung via RegEx hatte ich schon in betracht gezogen, was ja via HTML5 Tag Attribut "pattern" drin geswesen wäre ... ich hab mich nun schlussendlich für das MaskedInpu-Plugin entschieden und es läuft gut :)
    Grüße Manu

    Was Gott dem Menschen erspart hat, kann der Computer.
    Billy ©, (*1932), Schweizer Aphoristiker
    Quelle: www.Aphorismen.de