JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src=" https://unpkg.com/vue"></script>
<script src="https://unpkg.com/flatpickr"></script>
<div id="app">
{{selectedDate}}
<div>
<date-picker v-model="selectedDate"></date-picker>
</div>
</div>
JavaScript
console.clear()
Vue.component('date-picker', {
props:["value"],
data(){
return {
selectedDate: this.value
}
},
template: "<input type='text' v-model='selectedDate' @input='onInput'>",
methods:{
onInput(){
this.$emit('input', this.selectedDate)
}
},
mounted () {
new Flatpickr(this.$el, {})
}
})
new Vue({
el:"#app",
data:{
selectedDate:null
}
})