Some features from this component may require sgds.js

Overview

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

Select a 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>
    </span>
</div>

---

Can't find a component?

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

Request component