Input time mit vorgabe

[MH]

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

[Matthias Apsel]

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

[Tabellenkalk]

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

[Jens Müller (Incognito)]

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

[Gunnar Bittersmann]

@@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 🖖

[Matthias Apsel]

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

[Matthias Apsel]

Hallo Jens Müller (Incognito),

schönen Pfingtsmontag noch,
jens mueller

Das Urgestein ausm Ruhrpott?

Bis demnächst
Matthias