Input Ora

Campi input con bottoni per agevolare la selezione di un orario

Il componente input time, o timepicker, è un componente personalizzato per la selezione di un orario.

Input ora

Compatibilità con Internet Explorer 11

L’input type=”time” non è supportato da IE11, se ne consiglia l’utilizzo congiuntamente al plugin Just Validate per verificare l’effettiva validità del campo su Internet Explorer.

Assicurarsi di aggiungere alla label la classe active per impedire la sovrapposizione della label al campo.

Timepicker standard

<div class="form-group">
  <label class="active" for="timeStandard">Timepicker standard</label>
  <input class="form-control" id="timeStandard" type="time">
</div>

Input ora custom

Il componente verrà deprecato nella prossima release di Bootstrap Italia

Il componente timepicker custom presenta alcuni problemi di accessibilità. Se ne sconsiglia l’utilizzo.

Note importanti

Assicurati di aggiungere sempre l’attributo id ai seguenti tag:

<input class="form-control> : L’input di testo che riceve i valori selezionati.
<input class="spinnerHour"> : L’input di testo per i valori ora.
<input class="spinnerMin"> : L’input di testo per i valori minuti.
<button class="btnHourUp"> : Il pulsante che aumenta il valore ora.
<button class="btnHourDown"> : Il pulsante che diminuisce il valore ora.
<button class="btnMinUp"> : Il pulsante che aumenta il valore minuti.
<button class="btnMinDown"> : Il pulsante che diminuisce il valore minuti.

Label timepicker

<div class="it-timepicker-wrapper">
  <section class="time-spinner">
    <div class="error_container" role="alert" aria-atomic="true"></div>
    <fieldset>
      <legend><span class="sr-only">Time</span></legend>
      <div>
        <div class="calendar-input-container">
          <div class="form-group">
            <label for="txtTime1">Label timepicker</label>
            <input class="form-control txtTime" id="txtTime1" type="text" placeholder="hh:mm">
            <button class="btn-time" id="btnTime1" aria-label="Time picker - Scadenza">
              <svg class="icon">
                <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-clock"></use>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="spinner-control" aria-hidden="true" role="region" aria-label="Due Date Time" tabindex="-1">
      <div class="spinner-hour spinner">
        <input class="spinnerHour form-control" id="spinnerh" aria-label="hour" type="number" value="00" role="spinbutton" maxlength="2" aria-valuenow="00" aria-valuemax="23" aria-valuemin="0" bb-skip="3">
        <div class="button-wrapper">
          <button class="button-hour btnHourUp" id="iduph" aria-label="Increase Hour">
            <span class="icon-up"></span>
          </button>
          <button class="button-hour btnHourDown" id="iddownh" aria-label="Decrease Hour">
            <span class="icon-down"></span>
          </button>
        </div>
      </div>
      <div class="spinner-min spinner">
        <input class="spinnerMin form-control" id="spinnerm" aria-label="minute" type="number" value="00" role="spinbutton" aria-valuenow="00" maxlength="2" aria-valuemax="59" aria-valuemin="00" bb-skip="10">
        <div class="button-wrapper">
          <button class="btnMinUp button-minute" id="idupm" aria-label="Increase Minute">
            <span class="icon-up"></span>
          </button>
          <button class="btnMinDown button-minute" id="iddownm" aria-label="Decrease Minute">
            <span class="icon-down"></span>
          </button>
        </div>
      </div>
    </div>
  </section>
</div>

Versione scura

Per utilizzare il Datepicker in versione scura, aggiungere la classe .theme-dark al div it-timepicker-wrapper Clicca sull’icona per visualizzare il datepicker.

Label timepicker

<div class="it-timepicker-wrapper theme-dark">
  <section class="time-spinner">
    <div class="error_container" role="alert" aria-atomic="true"></div>
    <fieldset>
      <legend><span class="sr-only">Time</span></legend>
      <div>
        <div class="calendar-input-container">
          <div class="form-group">
            <label for="txtTime2">Label timepicker</label>
            <input class="form-control txtTime" id="txtTime2" type="text" placeholder="hh:mm">
            <button class="btn-time" id="btnTime2" aria-label="Time picker - Scadenza">
              <svg class="icon">
                <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-clock"></use>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="spinner-control" aria-hidden="true" role="region" aria-label="Due Date Time" tabindex="-1">
      <div class="spinner-hour spinner">
        <input class="spinnerHour form-control" id="spinnerh2" aria-label="hour" type="number" value="00" role="spinbutton" maxlength="2" aria-valuenow="00" aria-valuemax="23" aria-valuemin="00" bb-skip="3">
        <div class="button-wrapper">
          <button class="button-hour btnHourUp" id="iduph2" aria-label="Increase Hour">
            <span class="icon-up"></span>
          </button>
          <button class="button-hour btnHourDown" id="iddownh2" aria-label="Decrease Hour">
            <span class="icon-down"></span>
          </button>
        </div>
      </div>
      <div class="spinner-min spinner">
        <input class="spinnerMin form-control" id="spinnerm2" aria-label="minute" type="number" value="00" role="spinbutton" aria-valuenow="00" maxlength="2" aria-valuemax="59" aria-valuemin="00" bb-skip="10">
        <div class="button-wrapper">
          <button class="btnMinUp button-minute" id="idupm2" aria-label="Increase Minute">
            <span class="icon-up"></span>
          </button>
          <button class="btnMinDown button-minute" id="iddownm2" aria-label="Decrease Minute">
            <span class="icon-down"></span>
          </button>
        </div>
      </div>
    </div>
  </section>
</div>