Input ora
Componente personalizzato per la selezione di un orario.
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.
<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">
<input type="time" class="form-control" id="exampleInputTime" min="9:00" max="18:00">
<label for="exampleInputTime">Label timepicker</label>
</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>