Bulma Datetimepicker
This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a date and time picker. Use the type="datetime" attribute on the input. Please reference the plugin documentation for more details about usage.
//JS CODE
bulmaCalendar.attach('#bulma-datepicker-7', {
color: themeColors.primary,
lang: 'en'
});
//MARKUP
<div class="field">
<div class="control">
<input id="bulma-datepicker-7" class="input">
</div>
</div>
Bulma Datepicker
This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a date picker. Use the type="date" attribute on the input. Please reference the plugin documentation for more details about usage.
//JS CODE
bulmaCalendar.attach('#bulma-datepicker-1', {
color: themeColors.primary,
lang: 'en'
});
//MARKUP
<div class="field">
<div class="control">
<input id="bulma-datepicker-1" class="input" type="date">
</div>
</div>
Bulma Datepicker Modal
This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a modal date picker. Use the type="date" attribute on the input. Also use the displayMode: 'dialog' option in the javascript code for it to display as a modal. Please reference the plugin documentation for more details about usage.
//JS CODE
bulmaCalendar.attach('#bulma-datepicker-2', {
displayMode: 'dialog',
startDate: new Date('02/11/2018'),
minDate: '01/01/2018',
maxDate: '12/31/2018',
color: themeColors.primary,
lang: 'en'
});
//MARKUP
<div class="field">
<div class="control">
<input id="bulma-datepicker-2" class="input" type="date">
</div>
</div>
Bulma Datepicker Inline
This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows an inline date picker. Use the type="date" attribute on the input. Also use the displayMode: 'inline' option in the javascript code for it to display inline. Please reference the plugin documentation for more details about usage.
//JS CODE
bulmaCalendar.attach('#bulma-datepicker-3', {
displayMode: 'inline',
startDate: new Date('02/11/2018'),
minDate: '01/01/2018',
maxDate: '12/31/2018',
color: themeColors.primary,
lang: 'en'
});
//MARKUP
<div class="field">
<div class="control">
<input id="bulma-datepicker-3" class="input" type="date">
</div>
</div>
Bulma Daterange Picker
This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a range picker. Use the type="date" and the data-is-range="true" attributes on the input. Please reference the plugin documentation for more details about usage.
//JS CODE
bulmaCalendar.attach('#bulma-datepicker-4', {
color: themeColors.primary,
lang: 'en'
});
//MARKUP
<div class="field">
<div class="control">
<input id="bulma-datepicker-4" class="input" type="date" data-is-range="true">
</div>
</div>
Bulma Timepicker
This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a time picker. Use the type="time" attribute on the input. Please reference the plugin documentation for more details about usage.
//JS CODE
bulmaCalendar.attach('#bulma-datepicker-5', {
color: themeColors.primary,
lang: 'en'
});
//MARKUP
<div class="field">
<div class="control">
<input id="bulma-datepicker-5" class="input" type="time">
</div>
</div>
Bulma Timerange picker
This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a time range picker. Use the type="date" and the data-is-range="true" attributes on the input. Please reference the plugin documentation for more details about usage.
//JS CODE
bulmaCalendar.attach('#bulma-datepicker-6', {
color: themeColors.primary,
lang: 'en'
});
//MARKUP
<div class="field">
<div class="control">
<input id="bulma-datepicker-6" class="input" type="time"> data-is-range="true"
</div>
</div>
Pickaday Datepicker
Huro is integrated with Pikaday, a performant vanilla javascript datepicker library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following example shows you how to use it.
//JS CODE
var picker = new Pikaday({
field: document.getElementById('pickaday-datepicker'),
format: 'D MMM YYYY',
onSelect: function() {
//Do your stuff
}
});
//MARKUP
<div class="field">
<div class="control has-icon">
<input id="pickaday-datepicker" class="input" placeholder="select a date">
<div class="form-icon">
<i data-feather="calendar"></i>
</div>
</div>
</div>