MH: Input time mit vorgabe

Hi,
Ist es irgendwie möglich eine <input type="time"> Feld vorzugeben welche Uhrzeiten man nur auswählen kann?
Ich hab bis her immer die möglichen Zeiten als Liste ausgegeben und dann mit Radio-Button auswählen lassen. Zum Teil wird die Seite dann aber extrem lang.
Oder hat jemand eine andere Idee wie ich das anschaulicher darstellen könnte?

Gruß
MH

  1. Hallo MH,

    Ist es irgendwie möglich eine <input type="time"> Feld vorzugeben welche Uhrzeiten man nur auswählen kann?

    Oder hat jemand eine andere Idee wie ich das anschaulicher darstellen könnte?

    Sehr häufig sehe ich solche Auswahlen als select. Außerdem kannst du mit den Attributen min, max und step arbeiten. Das wäre wohl der bessere Weg.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
  2. Hallo,

    Oder hat jemand eine andere Idee wie ich das anschaulicher darstellen könnte?

    Kennst du den Sparpreisfinder der Bahn? Dort wird ein Schieberegler verwendet, k.A. ob das für dich taugt.

    Gruß
    Kalk

  3. Moin,

    Hi,
    Ist es irgendwie möglich eine <input type="time"> Feld vorzugeben welche Uhrzeiten man nur auswählen kann?

    In der Regel, ja. <input type="time" name="uhrzeit" min="9" max="22" value="19:09">

    Wobei Min am 9 Uhr startet und Max dann heißt, bis 22 Uhr

    Ich hab bis her immer die möglichen Zeiten als Liste ausgegeben und dann mit Radio-Button auswählen lassen. Zum Teil wird die Seite dann aber extrem lang.
    Oder hat jemand eine andere Idee wie ich das anschaulicher darstellen könnte?

    Wieso ein Radiobutton, kennst du das <datalist> Element?

    <div id="timepicker">
      <div class="time-show">
        <span class="time">Zeit : </span>
        <input type="text" name="time-hours" list="time-hours-select" min="9" max="22" placeholder="19">
          <datalist id="time-hours-select">
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>17</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
            <option>22</option>
          </datalist>
        <input type="text" name="time-minutes" list="time-minutes-select" min="00" max="59" placeholder="09">
          <datalist id="time-minutes-select">
            <option>00</option>
            <option>09</option>
            <option>15</option>
            <option>30</option>
            <option>45</option>
          </datalist>
      </div>
    </div>
    

    Was mich an dieser Lösung stört. Bisher ist es mir noch nicht gelungen, die <option> Elemente mit CSS zu Rendern. Die werden noch vom OS gestyled, bzw vom Browser Stylesheet.

    schönen Pfingtsmontag noch, jens mueller

    1. @@Jens Müller (Incognito)

      <input type="time" name="uhrzeit" min="9" max="22" value="19:09">

      Wobei Min am 9 Uhr startet und Max dann heißt, bis 22 Uhr

      Nein. Die Spec sagt: “The min attribute, if specified, must have a value that is a valid time string. The max attribute, if specified, must have a value that is a valid time string.”

      Richtig wäre <input type="time" name="uhrzeit" min="09:00" max="22:00" value="19:09">

      Und weiter im Text: “The step attribute is expressed in seconds. […] The default step is 60 seconds.”

      Ich hab bis her immer die möglichen Zeiten als Liste ausgegeben und dann mit Radio-Button auswählen lassen. Zum Teil wird die Seite dann aber extrem lang.
      Oder hat jemand eine andere Idee wie ich das anschaulicher darstellen könnte?

      Wieso ein Radiobutton, kennst du das <datalist> Element?

      Das macht die Benutzung nicht besser.

      Und man kann dann auch jeden Wert eingeben, nicht nur die vorgegebenen.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Hallo Gunnar Bittersmann,

        Und man kann dann auch jeden Wert eingeben, nicht nur die vorgegebenen.

        Allerdings: When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest time for which the element would not suffer from a step mismatch.

        Schade, dass da nicht muss steht.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
    2. Hallo Jens Müller (Incognito),

      schönen Pfingtsmontag noch,
      jens mueller

      Das Urgestein ausm Ruhrpott?

      Bis demnächst
      Matthias

      --
      Rosen sind rot.