[Vuejs]-I have tried to set default value in v-bind:max with a variable

by

0👍

Instead of having it as a method you can use a computed property. Also remove the method getDate() since the name is a reserved function name

 datan() {
        return {
            date_picker: null,
            form: {        // I have defined the form object here since you are using it in the v-model
               .....
            }
        }
    },
computed: {
    isDisabled() {
            return true;
        },
    computeMaxDate() {
            var d = new Date();
            d.setDate(d.getDate()-5);
            const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
            const mo = new Intl.DateTimeFormat('en', { month: 'numeric' }).format(d);
            const da = new Intl.DateTimeFormat('en', { day: 'numeric' }).format(d);

            if(ye < 10) {
                var new_year = '0' + ye;
            } else {
                var new_year = ye;
            }
            if(mo < 10) {
                var new_month = '0' + mo;
            } else {
                var new_month = mo;
            }
            if(da < 10) {
                var new_day = '0' + da;
            } else {
                var new_day = da;
            }
            this.date_picker = new_year +'-'+ new_month + '-' + new_day;
            return this.date_picker;
        }
}

and the modified template block is

<div class="form-group">
    <label for="exampleInputEmail1">Fecha de Recaudación</label>
    <input type="date"
       class="form-control" 
       id="exampleInputEmail1"
       :max="computeMaxDate"
       v-model="form.collection_date" 
       placeholder="Ingresa la fecha de la recaudación" 
       required>
</div>

Here in the computed property I have just copy pasted your logic…so you need to make sure that the value thats getting stored in the ‘date_picker’ is of the below format:

YYYY-MM-DD // eg: 2021-01-19

if its not of the above format then you need to debug and have it fixed

Leave a comment