Skip to content

Instantly share code, notes, and snippets.

@icai
Created October 11, 2016 06:15
Show Gist options
  • Save icai/ae4f5a7f529a34aeb79166825cf11f81 to your computer and use it in GitHub Desktop.
Save icai/ae4f5a7f529a34aeb79166825cf11f81 to your computer and use it in GitHub Desktop.
vue 2 directive with jqueryui
Vue.directive('datepicker', {
bind: function (el, binding, vnode, oldVnode) {
$(el).datepicker({
onSelect: function (date) {
vnode.context.date = date;
}
});
},
update: function (el, binding, vnode, oldVnode) {
$(el).datepicker('setDate', binding.value);
},
unbind: function (el) {
$(el).datepicker('destory');
}
});
Vue.directive('focus', {
// When the bound element is inserted into the DOM...
inserted: function (el) {
// Focus the element
el.blur();
setTimeout(function(){
el.focus();
}, 1000)
}
});
// create a root instance
var vm = new Vue({
el: '#app',
data: {
date: "10/12/2016"
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="app">
<input v-focus v-datepicker='date' v-model="date">
</div>
</body>
</html>
@mikaeljorhult
Copy link

Thank you! This helped me a lot when trying to get interact.js to work with Vue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment