type="time" als minuten:sekunden:millisekunden eingabe

  • Hallo liebe Mitglieder,


    ich habe folgendes Problem und finde keine Lösung.

    Ich würde gerne eine <form type="time"/> Eingabe nur für "Minuten:Sekunden:Millisekunden" auf einer Seite einbinden.

    ist das irgendwie möglich, oder muss ich es als Text/Zahlenfeld eingeben lassen und dann mit php in das Zeitformat splitten und umwandeln?


    vielen Dank für eure Tipps.

  • Irgendwie verstehe ich die frage nicht . Du schreibst ja selber

    Ich würde gerne eine <form type="time"/> Eingabe nur für "Minuten:Sekunden:Millisekunden" auf einer Seite einbinden.

    Weil die Antwort hast du dir doch schon selbst geschrieben ( type="time" ).

    Oder was willst du nicht wissen ?

  • Hallo, tut mir Leid das ich jetzt erst schreibe...

    vielen Dank für eure Mühe

    allerdings verstehe ich eure Antworten irgendwie nicht so ganz, es ist mir schon klar das es <form> <input type="time"...> ist.

    Das hätte man auch leicht mit der Forensuche oder über Google gefunden...

    Wer allerdings meine Frage aufmerksam liest, entdeckt diesen Teil der Frage:

    Zitat

    Eingabe nur für "Minuten:Sekunden:Millisekunden"


    Nach meinen neuesten Erkenntnissen gibt es mit step="1"bzw. "0.001" Sekunden und Millisekunden.

    wie kriege ich jetzt die Stunden weg? Stunden Brauche ich nie, NUR Minuten:Sekunden:Millisekunden...

  • Ich empfehle, den Timepicker für jQuery-UI zu verwenden.Damit kannst Du ganz genau steuern, was angezeigt wird und was nicht:

    http://trentrichardson.com/examples/timepicker/

    Zitat

    showHourDefault: null - Whether to show the hour control. The default of null will use detection from timeFormat.

    showMinuteDefault: null - Whether to show the minute control. The default of null will use detection from timeFormat.

    showSecondDefault: null - Whether to show the second control. The default of null will use detection from timeFormat.

    showMillisecDefault: null - Whether to show the millisecond control. The default of null will use detection from timeFormat.

    showMicrosecDefault: null - Whether to show the microsecond control. The default of null will use detection from timeFormat.

    Hat außerdem folgende Vorteile:

    • Funktioniert auch im IE11
    • Sieht in jedem Browser gleich aus
  • Oder einfach schnell selber bauen, wenn's nicht zwingend ein Picker sein muss:

    HTML
    1. <span class="timeframe"><input type="number" name="time[min]" value="00"><span>:</span><input type="number" name="time[sec]" value="00"><span>.</span><input type="number" name="time[msec]" value="000"></span>
    CSS
    1. .timeframe { padding:5px; border:1px solid #ccc; }
    2. .timeframe > INPUT { width:50px; border:none; text-align:right; }

    Mit etwas EventListening lässt sich da auch eine relativ gute Usability erreichen, ganz ohne jQuery.

    Solltest Du bereits jQuery im Einsatz haben, ist das PlugIn sicher eine gute Wahl. Aber dafür extra jQuery einzusetzen halte ich für Overhead.

  • Arne Drews wahr schon schneller sonst hätte ich meine Idee schon früher gepostet.

    Eigentlich wollte ich die auch gar nicht mehr zeigen, weil hier schon Lösungen sind.

    Doch bei meiner Lösung habe ich jetzt selber ein Problem was ich nicht ganz verstehe.

    Ich habe das auch mit nativen Javascript gemacht doch irgendwie läuft meine foreach schleife nicht.

    Mit einer normalen for Schleife geht alles wie man sehen kann.

    Mache ich die Schleife weg und will die each Schleife nutzen geht es nicht mehr. (Schleife ist auskommentiert). Vielleicht kann mir mal einer sagen was ich da falsch mache.

    https://basti1012.bplaced.net/…rdner=html-seminar&id=337

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Na gut, eigentlich ist so einiges falsch an dem auskommentierten.

    Zunächst mal fehlen zwei schließende geschweifte Klammern. Dann müssen Events ohne den Prefix on angegeben werden. Dein nicht funktionierender Block sollte dann in etwa so aussehen:

    JavaScript
    1. element=document.querySelectorAll('input');
    2. element.forEach((i) => {
    3. i.addEventListener('change', (e) => {
    4. alert();
    5. };
    6. };

    Das wäre technisch eigentlich in den modernen Browsern korrekt, wie Opera das sieht, kann ich adhoc nicht sagen.

    Probleme macht auf jeden Fall die M$-Schiene. Dort ist nämlich die Schreibweise für die Funktionen nicht bekannt, hier müsste das gegen die Standard-Schreibweise getauscht werden:

    JavaScript
    1. element=document.querySelectorAll('input');
    2. element.forEach(function(i) {
    3. i.addEventListener('change', function(e) {
    4. alert();
    5. };
    6. };

    Jetzt gibt es eigentlich nur noch ein mir bekanntes Problem von Seiten M$: forEach() ist nur für echte Arrays verfügbar!

    querySelectorAll() gibt aber eine NodeList zurück, die streng genommen kein Array ist, weshalb IE behaupet: forEach()? Kenne ich nicht.

    Daher bleibt Dir an der Stelle eigentlich nur eine Standard-Loop Variante oder fehlende Funktionalitäten nachzubauen.


    Ich denke zwar, dass der Opera das mit der modernen Variante schon hinbekommen sollte, sofern die Klammern usw. korrekt gesetzt sind, aber dennoch wird so ein Script sicher auch mal in einem M$-Browser ausgeführt werden sollen und dann klappt es leider nicht.


    Ich würde übrigens auch nicht das change Event nehmen, sondern keyup.

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von Arne Drews ()

  • Na gut, eigentlich ist so einiges falsch an dem auskommentierten.

    Zunächst mal fehlen zwei schließende geschweifte Klammern. Dann müssen Events ohne den Prefix on angegeben werden. Dein nicht funktionierender Block sollte dann in etwa so aussehen:

    JavaScript
    1. element=document.querySelectorAll('input');
    2. element.forEach(function(i) {
    3. i.addEventListener('change', function(e) {
    4. alert();
    5. }
    6. }

    Ok ,die Fehlenden Klammern wahren ganz unten auskommentiert,wahr auch etwas blöd von mir.

    Aber der haupt Grund lag ja wohl an den "ON" und das ich es ohne function() gemacht habe.

    Aber aufjedenfall habe ich wieder was dazu gelernt ,ich dachte eigentlich das es mit each und querySelector jeder Browser versteht.Aber auch interesant wo überall unterschiede gemacht werden. Selbst eine kleine änderung und schon geht nix mehr.


    Habe das jetzt mit keyup und function gemacht und schon läuft der Code auch .

    Besten Dank für den input:)

  • Gerne. Ne, es gibt leider immer noch hier und da einiges zu bedenken, wenn es in allen Browsern funktionieren soll. Man kann jetzt über M$ meckern, aber es sind tlw. auch Dinge dabei, die die aus meiner Sicht zumindest korrekt machen, gegenüber den modernen Browsern.


    Am besten hilft die Konsole bei sowas, da wird dann bspw. ja angezeigt .forEach() is not a method o.ä.

    Dann kann man bereits ahnen, worauf das hinausläuft.