Documentation
Basic
Extended
Blocks

Date picker

JavaScript version

You will have to use https://www.npmjs.com/package/js-datepicker.

<div class="form-field form-datepicker form-datepicker-js">
    <label for="datepicker-js" class="form-label">Choose date</label>
    <input type="text" class="form-input" id="datepicker-js" />
</div>

Inject necessary styles and scripts

<link rel="stylesheet" href="https://unpkg.com/js-datepicker/dist/datepicker.min.css">
<script src="https://unpkg.com/js-datepicker"></script>

Add following code in DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
    datepicker('#datepicker-js');
});

For datepicker option check https://www.npmjs.com/package/js-datepicker

No JavaScript version

It uses native <input type="date"> element

Known issue
Firefox does not support native <input type="date"> styles. Please use JavaScript version for better compatibility. 


<div class="form-field form-datepicker">
    <input type="date" name="datepicker" class="form-input" />
</div>
Month picker
<div class="form-field form-datepicker">
    <input type="month" class="form-input" />
</div>
Week picker
<div class="form-field form-datepicker">
    <input type="week" class="form-input" />
</div>