Skip to content

Instantly share code, notes, and snippets.

@asika32764
Last active December 1, 2021 08:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save asika32764/1c2c81ffdd135e20cb3f7be6824295b2 to your computer and use it in GitHub Desktop.
Save asika32764/1c2c81ffdd135e20cb3f7be6824295b2 to your computer and use it in GitHub Desktop.
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