SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Time Picker

Some features from this component may require sgds.js


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

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

Can't find a component?

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

Request component