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

Date Picker

Some features from this component may require sgds.js


A date picker let user input a single date.

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

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>

Can't find a component?

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

Request component