Timepicker mit HTML und CSS

Timepicker Deigsnbeispiel

Timepicker Anzeigebeispiel

Für Webanwendungen gibt es verschiedene Möglichkeiten, einen Timepicker mit Hilfe von JavaScript (jQuerry) oder ähnlichen Elementen der Programmierung zu verwirklichen. Auf der Suche nach einer Möglichkeit mit „reinem“ CSS3 und HTML fand ich jedoch keine wirklich überzeugende Lösung. Also verfolgte ich die Zielstellung, ein eigene Problemlösung zu finden, die zudem auch für den Einsatz auf Seiten mit Responsive Webdesign zum Einsatz kommen kann. So können lästige Popup-Menüs auch auf Smartphones und Tablets bei der Auswahl von Tageszeiten vermieden werden. Der Timepicker ist ein Bestandteil meines sich momentan in Entwicklung befindlichen Twitter-Bots „seek&tweet“. Dort können mit Hilfe des Timepickers die Zeitpunkte für die Suche nach neuen Nachrichten definiert werden.

Timepicker Demo

Das folgende Beispiel zeigt eine Umsetzung eines solchen Timepickers, der es erlaubt, Zeiten auszuwählen, ohne auf externe Ressourcen zugreifen zu müssen: Auf Grundlage eines normalen HTML-Formulars und Cascadian Stye Sheet Auszeichnungen hat der Anwender hier die Möglichkeit, Zeiten intuitiv auf einer Uhr auszuwählen. Der komplette HTML- und CSS-Code befindet findet sich weiter unten.

[h]























[min]











Timepicker Demo

HTML und CSS

Das HTML-Formular beinhaltet für jede Stunden- bzw. Minutenangabe ein input-Element des Typs checkbox. Diese lassen sich jedoch nicht direkt per CSS „stylen“, weshalb man sich das label-Element zu Nutze macht: Ordnet man diese über das Attribut for einer ID zu, so ändert sich bei einem Klick auf das label-Element auch der Status der Checkbox.

Hier zunächst als Beispiel das input-Element für die Stunde 12 und im Anschluss das zugehörige label-Element:

<input id="hour12" type="checkbox" name="hours" value="12" />
<label for="hour12">12</label>

Jede Checkbox muss also eine einzigartige ID (Beispiel: hour12) erhalten, um einem label-Element zugeordnet werden zu können. Dieses lässt sich dann wie gewohnt mittels CSS definieren.

Die Positionierung der einzelnen Ziffern erfolgt mittels Pixel-genauer Ausrichtung von Klassen. Für jede volle Stunde wird hierbei eine Position definiert:

.hour12 + label {
    top: 4px;
    left: 88px;
}

Die Position für Stunde 12 lässt sich natürlich auch für die Minutenangabe 0 nutzen.

Umschlossen werden die input– bzw. label-Elemente von einem div-Container.  Durch die Eigenschaft position: relative; können die einzelnen Ziffern absolut ausgerichtet (position: absolute;) werden. Hier werden auch die anderen Eigenschaften des Timepickers, wie z.B. die Schriftart oder die Größe festgelegt werden. Bei der Größe sollte darauf geachtet werden, dass die Breite der Höhe entspricht und diese im Idealfall durch 2 und 3 teilbar sind.

Abgesehen von der oben beschriebenen Positionierung der Ziffern, werden die anderen Eigenschaften über input.checkboxTimePicker+ label { ... } definiert.

Im folgenden der komplette Code für das obige Beispiel.

HTML-Code

<!-- [...] -->
<form action="http://www.chartmann.com/html-form-test/" method="GET">
  <div class="timePicker">[h]
    <input id="hour12" type="checkbox" name="hours" value="12" /> 
    <label for="hour12">12</label> 
    <input id="hour1" type="checkbox" name="hours" value="1" /> 
    <label for="hour1">1</label> 
    <input id="hour2" type="checkbox" name="hours" value="2" /> 
    <label for="hour2">2</label> 
    <input id="hour3" type="checkbox" name="hours" value="3" /> 
    <label for="hour3">3</label> 
    <input id="hour4" type="checkbox" name="hours" value="4" /> 
    <label for="hour4">4</label> 
    <input id="hour5" type="checkbox" name="hours" value="5" /> 
    <label for="hour5">5</label> 
    <input id="hour6" type="checkbox" name="hours" value="6" /> 
    <label for="hour6">6</label> 
    <input id="hour7" type="checkbox" name="hours" value="7" /> 
    <label for="hour7">7</label> 
    <input id="hour8" type="checkbox" name="hours" value="8" /> 
    <label for="hour8">8</label> 
    <input id="hour9" type="checkbox" name="hours" value="9" /> 
    <label for="hour9">9</label> 
    <input id="hour10" type="checkbox" name="hours" value="10" />
    <label for="hour10">10</label> 
    <input id="hour11" type="checkbox" name="hours" value="11" /> 
    <label for="hour11">11</label> 
    <input id="hour0" type="checkbox" name="hours" value="0" /> 
    <label for="hour0">0</label> 
    <input id="hour13" type="checkbox" name="hours" value="13" /> 
    <label for="hour13">13</label> 
    <input id="hour14" type="checkbox" name="hours" value="14" /> 
    <label for="hour14">14</label> 
    <input id="hour15" type="checkbox" name="hours" value="15" /> 
    <label for="hour15">15</label> 
    <input id="hour16" type="checkbox" name="hours" value="16" /> 
    <label for="hour16">16</label> 
    <input id="hour17" type="checkbox" name="hours" value="17" /> 
    <label for="hour17">17</label> 
    <input id="hour18" type="checkbox" name="hours" value="18" /> 
    <label for="hour18">18</label> 
    <input id="hour19" type="checkbox" name="hours" value="19" /> 
    <label for="hour19">19</label> 
    <input id="hour20" type="checkbox" name="hours" value="20" /> 
    <label for="hour20">20</label> 
    <input id="hour21" type="checkbox" name="hours" value="21" />
    <label for="hour21">21</label> 
    <input id="hour22" type="checkbox" name="hours" value="22" /> 
    <label for="hour22">22</label> 
    <input id="hour23" type="checkbox" name="hours" value="23" /> 
    <label for="hour23">23</label>
  </div>
  <div>[min]
    <input id="minute0" type="checkbox" name="minutes" value="0" /> 
    <label for="minute0">0</label> 
    <input id="minute5" type="checkbox" name="minutes" value="5" /> 
    <label for="minute5">5</label> 
    <input id="minute10" type="checkbox" name="minutes" value="10" /> 
    <label for="minute10">10</label> 
    <input id="minute15" type="checkbox" name="minutes" value="15" /> 
    <label for="minute15">15</label> 
    <input id="minute20" type="checkbox" name="minutes" value="20" /> 
    <label for="minute20">20</label> 
    <input id="minute25" type="checkbox" name="minutes" value="25" /> 
    <label for="minute25">25</label> 
    <input id="minute30" type="checkbox" name="minutes" value="30" /> 
    <label for="minute30">30</label> 
    <input id="minute35" type="checkbox" name="minutes" value="35" /> 
    <label for="minute35">35</label>
    <input id="minute40" type="checkbox" name="minutes" value="40" /> 
    <label for="minute40">40</label> 
    <input id="minute45" type="checkbox" name="minutes" value="45" /> 
    <label for="minute45">45</label> 
    <input id="minute50" type="checkbox" name="minutes" value="50" /> 
    <label for="minute50">50</label> 
    <input id="minute55" type="checkbox" name="minutes" value="55" /> 
    <label for="minute55">55</label>
  </div> 
  <input type="submit" value="submit" /> 
  <input type="reset" value="reset" />
</form>
<!-- [...] -->

CSS-Code

.timePicker {
    display: inline-block;
    width: 198px;
    height: 198px;
    border-radius: 99px;
    position: relative;
    overflow: hidden;
    background: #eee;
    color: #999;
    box-shadow: inset 0px 0px 0px 4px #999;
    font-family: 'Alef', Tahoma, Verdana, Arial;
    font-weight: normal;
    font-size: 28px;
    text-align: center;
    line-height: 198px;
}
input.checkboxTimePicker {
    display: none;
}
input.checkboxTimePicker+ label {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    background: none;
    color: #000;
    text-align: center;
    font-size: 18px;
    line-height: 20px;
}
input.checkboxTimePicker+ label:hover {
    background: #aaa;
}
.timePicker input[type=checkbox]:checked + label {
    color: #fff;
    background: #666;
}
input.checkboxTimePicker.hour12 + label {
    top: 4px;
}
input.checkboxTimePicker.hour11 + label,
input.checkboxTimePicker.hour1 + label {
    top: 15px;
}
input.checkboxTimePicker.hour10 + label,
input.checkboxTimePicker.hour2 + label {
    top: 46px;
}
input.checkboxTimePicker.hour9 + label,
input.checkboxTimePicker.hour3 + label,
input.checkboxTimePicker.hour21 + label,
input.checkboxTimePicker.hour15 + label {
    top: 88px;
}
input.checkboxTimePicker.hour8 + label,
input.checkboxTimePicker.hour4 + label {
    bottom: 46px;
}
input.checkboxTimePicker.hour7 + label,
input.checkboxTimePicker.hour5 + label {
    bottom: 15px;
}
input.checkboxTimePicker.hour6 + label {
    bottom: 4px;
}
input.checkboxTimePicker.hour9 + label {
    left: 4px;
}
input.checkboxTimePicker.hour10 + label,
input.checkboxTimePicker.hour8 + label {
    left: 15px;
}
input.checkboxTimePicker.hour11 + label,
input.checkboxTimePicker.hour7 + label {
    left: 46px;
}
input.checkboxTimePicker.hour12 + label,
input.checkboxTimePicker.hour6 + label,
input.checkboxTimePicker.hour0 + label,
input.checkboxTimePicker.hour18 + label {
    left: 88px;
}
input.checkboxTimePicker.hour1 + label,
input.checkboxTimePicker.hour5 + label {
    right: 46px;
}
input.checkboxTimePicker.hour2 + label,
input.checkboxTimePicker.hour4 + label {
    right: 15px;
}
input.checkboxTimePicker.hour3 + label {
    right: 4px;
}
input.checkboxTimePicker.hour0 + label {
    top: 30px;
}
input.checkboxTimePicker.hour23 + label,
input.checkboxTimePicker.hour13 + label {
    top: 38px;
}
input.checkboxTimePicker.hour22 + label,
input.checkboxTimePicker.hour14 + label {
    top: 59px;
}
input.checkboxTimePicker.hour20 + label,
input.checkboxTimePicker.hour16 + label {
    bottom: 59px;
}
input.checkboxTimePicker.hour19 + label,
input.checkboxTimePicker.hour17 + label {
    bottom: 38px;
}
input.checkboxTimePicker.hour18 + label {
    bottom: 30px;
}
input.checkboxTimePicker.hour21 + label {
    left: 30px;
}
input.checkboxTimePicker.hour22 + label,
input.checkboxTimePicker.hour20 + label {
    left: 38px;
}
input.checkboxTimePicker.hour23 + label,
input.checkboxTimePicker.hour19 + label {
    left: 59px;
}
input.checkboxTimePicker.hour13 + label,
input.checkboxTimePicker.hour17 + label {
    right: 59px;
}
input.checkboxTimePicker.hour14 + label,
input.checkboxTimePicker.hour16 + label {
    right: 38px;
}
input.checkboxTimePicker.hour15 + label {
    right: 30px;
}

Verweise

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.