Level 3
What errors are you getting when your code runs?
Aug 1, 2016
2
Level 10
Flatpickr
Can someone help me getting started here. I'm trying to wrap Flatpickr in Vue, but I have some issues instantiating it.
Flatpickr: https://chmln.github.io/flatpickr/
After the npm install I have created this component to wrap it in, but I am not doing it correctly. I was trying to copy the Chart.js tutorial from here, but without luck:
<template>
<input v-el:flatpickr>
</template>
<script>
import Flatpickr from 'flatpickr';
export default {
components: {
},
props: {
},
ready() {
new Flatpickr(this.$els.flatpickr, []);
},
data() {
return {
}
},
computed: {
},
methods: {
},
events: {
}
}
</script>
<style lang="scss" scoped>
</style>
Level 10
Not really any, but it's working now.
Here's my component if anyone is interested:
npm install flatpickr
Add this to your SCSS
@import 'node_modules/flatpickr/dist/flatpickr.min';
<template>
<ui-textbox
v-el:flatpickr
v-ref:flatpickr
:name="name"
data-mindate="today"
:placeholder="placeholder"
:icon="icon"
:label="label"
:value.sync="value"
:validation-rules="validationRules"
readonly>
</ui-textbox>
</template>
<script>
import UiTextbox from 'keen-ui/lib/UiTextbox';
import flatpickr from 'flatpickr';
export default {
components: {
UiTextbox
},
props: {
name: {
type: String,
default: 'date'
},
placeholder: {
type: String
},
date: {
},
label: {
type: String
},
value: {
twoWay: true
},
icon: {
type: String
},
validationRules: {
type: String
}
},
ready() {
var self = this;
this.flatpickr = flatpickr(this.$els.flatpickr, {
onChange(dateObject, dateString) {
self.$refs.flatpickr.value = dateString;
},
defaultDate: this.date
});
if (this.date)
this.$refs.flatpickr.value = this.date;
},
data() {
return {
flatpickr: null
}
},
computed: {
},
methods: {
},
events: {
}
}
</script>
<style lang="scss" scoped>
.ui-textbox-input {
cursor: pointer;
}
</style>
4 likes
Please or to participate in this conversation.