Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue Bootstrap Datetimepicker Directive - https://eonasdan.github.io/bootstrap-datetimepicker/
Vue.directive('calendar', {
inserted(el, binding) {
// :v-calendar="{ format: 'YYYY-MM-DD HH:mm:ss' }"
const options = Object.assign({
// Some default options
// Use FontAwesome icons
icons:{
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down',
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-calendar-check-o',
clear: 'fa fa-trash-o',
close: 'fa fa-close'
}
}, binding.value || {});
$(el).datetimepicker(options).on('dp.change', function (event) {
const input = el.querySelector('input');
let e = new Event('change');
input.dispatchEvent(e);
e = new Event('input');
input.dispatchEvent(e);
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.