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>