vuejs 3 support, ranges not updated on calendar
lfmunoz opened this issue · 2 comments
lfmunoz commented
Was trying to get this to work on vuejs3 but it won't update the dates on the calendar. See the watch section for how I was trying to do that. It updates the dates but the ranges don't change to select the updates ranges.
<template>
<input ref="refCal" :type="refType" />
</template>
<script>
import { watch, ref, defineEmits, onMounted} from 'vue';
import bulmaCalendar from "bulma-calendar/dist/js/bulma-calendar.min";
export default {
emits: ['update:modelValue'],
setup(props, { emit }) {
const refCal = ref(null);
const refType = ref(props.type);
const refDate = ref([null, null]);
// Set date
if (props.range) {
if (props.modelValue instanceof Array) {
refDate.value = props.modelValue;
}
} else {
refDate.value[0] = props.modelValue;
}
// can only access ref after mounted
onMounted(() => {
// Attach Calendar
const calendar = bulmaCalendar.attach(refCal.value, {
...props.options,
displayMode: props.inline ? 'inline' : (props.dialog ? 'dialog' : 'default'),
// isRange: props.range,
isRange: true,
showClearButton: props.clearable,
startDate: refDate.value[0],
startTime: refDate.value[1],
endDate: refDate.value[0],
endTime: refDate.value[1],
});
// Event Handler
calendar[0].on('save', e => {
refDate.value = [e.data.startDate, e.data.endDate];
if (props.range) {
emit('update:modelValue', refDate.value);
return;
}
emit('update:modelValue', refDate.value[0]);
});
console.log(calendar);
// https://github.com/Wikiki/bulma-calendar/blob/master/src/js/index.js
watch( () => {
console.log(props.modelValue)
// calendar[0].clear()
// calendar[0].setStartDate(props.modelValue[0])
// calendar[0].startDate = props.modelValue[0]
// calendar[0].endDate = props.modelValue[1]
// calendar[0].refresh()
});
})
return {
refType,
refCal,
refDate
}
},
props: {
clearable: {
type: Boolean,
default: false
},
dialog: {
type: Boolean,
default: false
},
inline: {
type: Boolean,
default: false
},
range: {
type: Boolean,
default: false
},
options: {
type: Object,
default() { return {}; }
},
type: {
type: String,
default: 'datetime'
},
modelValue: Date|Array|null
},
}
</script>
michael-hack commented
Sorry, I can't help with VueJS 3 at the moment, as I use the calendar exclusively in conjunction with Buefy, which is still based on VueJS 2.