How to get the value of a datepicker using framework7 and vuejs?

1

I have the following component:

<f7-list-input
label=“Fecha de nacimiento”
type=“datepicker”
placeholder=“Selecciona una fecha”
:value=“perfil.fecha_nacimiento”
@input=“perfil.fecha_nacimiento = $event.target.value”
:calendar-params=“parametrosCalendario”
>

<f7-button class=“button button-big button-fill”
@click=“editarPerfil(perfil)”>Guardar 

    data(){
            return {
                perfil: {
                    fecha_nacimiento: ''
                },
    },
   methods:{
    editarPerfil(perfil){
            let vm = this;
            console.log(perfil); //When printing in console, profile, birthdate, this gap.

        },
}

but when I get the information of the birthdate, I can not get it.

2

I have the exactly same issue!

I’ve tried everything and I cannot get its value…

In this documentation it says that the value type is an array.

I’ve tried doing @input=“myValue.push($event.target.value)” but it did not work either.

@jggj did you find the solution?
Please, if someone know the solution post it here.

3

To get correct calendar Date values array, you need to listen for @calendar:change event instead

type="datepicker" @calendar:change="(values) => myValue.push(...values)"
1 Like
4

I am doing the following:

<f7-list-input
                        label="Fecha de nacimiento"
                        type="datepicker"
                        placeholder="Selecciona una fecha"
                        :value="perfil.fecha_nacimiento" 
                        @input="perfil.fecha_nacimiento = $event.target.value"
                        @calendar:change="infoCalendario"         
                        :calendar-params="parametrosCalendario"
                    ></f7-list-input>

infoCalendario(e){
            let vm = this;
            let fecha = new Date(e);
            vm.perfil.fecha_nacimiento = fecha.getTime();            
        }

but I get the following error:

[Vue warn]: Error in callback for watcher “props.value”: “TypeError: e.map is not a function”

5

Check ListInput docs about value property https://framework7.io/vue/inputs.html#input-properties, it must be an Array with date. And you shouldn’t use @input here, just value + @calendar:change

1 Like
6

Thank you very much I already get the value I only have this error

Estimated with a query, it will be that there are certain calendar numbers that do not select them, for example from 9 to 20 do not select them in this image. the other numbers if you select them. But checking see that it is in this section where the red box is where you do not select, so with the other months of the calendar

image

<f7-list-input
      label="Fecha de nacimiento"
      type="datepicker"
      placeholder="Selecciona una fecha"
      :value="[new Date(perfil.fecha_nacimiento)]"
      @calendar:change="infoCalendario"       
      :calendar-params="parametrosCalendario"
></f7-list-input>

parametrosCalendario: {
                openIn: 'customModal', 
                header: true, 
                footer: true, 
                dateFormat: 'MM dd yyyy', 
                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto' , 'Septiembre' , 'Octubre', 'Noviembre', 'Diciembre'], 
                dayNamesShort:['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
                toolbarCloseText: "Aceptar"
            },
7

Reviewing I see that it is a problem that dialog was not closed, what could that dialogue error be ?, I currently close it this way.

image
image.png1035×643 72 KB

initialize: vm.$f7.dialog.preloader('Cargando');
close: vm.$f7.dialog.close();

but as you will see, it stays there

8

That is weird. Are you on very latest version of F7?