Some features from this component may require sgds.js

Overview

A time picker let users input hour and minute values.

The timepicker component relies on the 3rd pary library flatpickr to work, similiar to the datepicker component.
Learn how to use and extract time values in JavaScript using flatpickr here.

Enter a time

Select a time

<label class="label" for="timepicker">Select a time</label>
<div class="control has-icons-right">
    <input class="input timepicker" type="text" id="timepicker" placeholder="HH-MM" width="350">
    <span class="icon is-small is-right">
        <i class="sgds-icon sgds-icon-clock"></i>
    </span>
</div>

---

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component