Reference error on click event

[laTruffe79]

Hello, thank you for this beautiful component, I just have a problem when I click on a date I got this error in console Did i miss anything ?

<div class="col-3" id="div_date_naissance">
               <label for="date_naissance">Date de naissance</label>
               <date-picker v-model="getDate('{{$dateNaissance}}')" :lang="lang" :input-attr="myInput" :format="myFormat" name="date_naissance">
               </date-picker>
</div>

and here is my js :

import datePicker from 'vue2-datepicker';

let datePick = new Vue({

    el: '#div_date_naissance',
    data: {
        time1: new Date(),
        lang: {
            days: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
            months: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Auo', 'Sep', 'Oct', 'Nov', 'Dec'],
            pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
            placeholder: {
                date: 'Select Date',
                dateRange: 'Select Date Range'
            }
        },
        myInput: {
            name: 'date_naissance',
            id: 'date_naissance',
            autocomplete:'false',
        },
        myFormat : "DD-MM-YYYY",

    },
    components: {datePicker},
    methods:{

        getDate : function(date){
            console.log(date.toString());
            let newDate = new Date(date.toString());
            console.log(newDate);
            return newDate;
        },

    },

});

and how can I change the name of the field which is "date" despite I've tried to set it to "date_naissance" in "myInput" ? Thanks for your help.

[mengxiong10]

The v-model need a value in data or prop.

<date-picker v-model="time1" valueType="format" ></date-picker>

[laTruffe79]

OK, so how can i pass some value ? I need to set the field to a value that represent a birthday. Thank you very much.

I've tried to add a method and a prop like this :

data: {
        time1: '',
        lang: {
            days: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
            months: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Auo', 'Sep', 'Oct', 'Nov', 'Dec'],
            pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
            placeholder: {
                date: 'Select Date',
                dateRange: 'Select Date Range'
            }
        },
        myInput: {
            name: 'date_naissance',
            id: 'date_naissance',
            autocomplete:'false',

        },
        myFormat : "DD-MM-YYYY",
    },
methods:{
        getDate : function(date){
            console.log(date.toString());
            let newDate = new Date(date.toString());
            console.log(newDate);
            this.time1 = newDate;
            //return newDate;
        },

    },
props:{
        myDate : {
            type : String,
        }
    }

and the prop

<date-picker
             v-model="time1"
             :myDate="getDate('{{$formateur->date_naissance}}')"
             :lang="lang"
             :input-attr="myInput"
             :format="myFormat"
             name="date_naissance">
</date-picker>

but it seems to create an infinite loop warning from Vue, how can I deal with that ?

[mengxiong10]

:myDate="getDate('{{$formateur->date_naissance}}')"

This code is bad. Just remove it. The DatePicker will change the time1 when some pick . You can set valueType="format" Then the time1 is a string like 10-10-2019

<date-picker v-model="time1" valueType="format" ></date-picker>

[laTruffe79]

Thanks, how can i set the time1 value dynamically ? I must pass the value of the result given by the php controller.

[mengxiong10]

This is not the topic that should be discussed here. You can interact with the backend via Ajax, or get to know SSR.