Hi,
I cannot reinitialise picker values. I use Vue, but picker is made on native js. And something goes wrong.
Trying to destroy picker on popup’s closing:
<template>
<div>
<f7-list>
<f7-list-item
title = "Время"
:after = "getTime">
</f7-list-item>
</f7-list>
<input
style = "display: none;"
id = "picker-date"/>
<div class="block block-strong no-padding no-margin margin-bottom">
<div id="picker-date-container"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOpened : false,
timePicker : "",
}
},
mounted() {
this.$root.$on('open date and time', (data) => {
this.isOpened = true;
this.mountTimePicker();
});
},
watch: {
isOpened: function(val) {
if (!val) {
if (this.timePicker) this.timePicker.destroy();
}
},
},
methods: {
mountTimePicker() {
const self = this;
var today = new Date();
this.timePicker = this.$f7.picker.create({
containerEl : '#picker-date-container',
inputEl : '#picker-date',
toolbar : false,
rotateEffect : false,
value : [
this.getHours,
this.getMinutes
],
formatValue: function (values, displayValues) {
return values[0] + ':' + values[1];
},
cols: [
// Hours
{
values: (function () {
var arr = [];
for (var i = 0; i <= 23; i++) {
arr.push(i < 10 ? '0' + i : i);
}
return arr;
})(),
},
// Divider
{
divider: true,
content: ':'
},
// Minutes
{
values: (function () {
var arr = [];
for (var i = 0; i <= 59; i++) {
arr.push(i < 10 ? '0' + i : i);
}
return arr;
})(),
}
],
on: {
change: function (picker, values, displayValues) {
self.time = parseInt(values[0]) * 3600 + parseInt(values[1]) * 60
},
}
});
}
}
}
</script>
When I change some values of re-opened picker, the error is showing up
On third try there will be three items and so on 