Date Picker

Some features from this component may require sgds.js


A date picker lets users select a single date.

The datepicker component rely on the 3rd pary library flatpickr to work.
Learn how to use flatpickr

Select single date

<label class="label" for="datepicker">Select a date</label>
<div class="control has-icons-right">
    <input class="input datepicker" type="text" id="datepicker" placeholder="YYYY-MM-DD" width="350">
    <span class="icon is-small is-right">
        <i class="sgds-icon sgds-icon-calendar"></i>


Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team