The specified value does not conform to the required format, “yyyy-MM-dd”. Vue.js

I’m trying to put current date of the record to my input type="date" field. Strings works perfectly, they all go to form when I click the button, except date.

My input type is date on the form. And I need to add the date as value to that.

That is how I’m currently trying: this.birth_date = student.birth_date;

But the date is Laravel date, I get error: The specified value “2000-07-08T00:00:00.000000Z” does not conform to the required format, “yyyy-MM-dd”.

I’ve also tried to formatting the date with moment.js, but that didn’t work either.

Form

<form @submit.prevent="addStudent()">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="First Name"  v-model="first_name">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Surname"  v-model="last_name">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Student Number" required v-model="student_number">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Phone Number" required v-model="phone_number">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="E-Mail" required v-model="email">
                </div>
                <div class="form-group">
                    <input type="date" class="form-control" placeholder="Birth Date" :max="moment().format('YYYY-MM-DD')" required v-model="birth_date">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="School Name" required v-model="school_name">
                </div>
                <button type="submit" class="btn btn-success">Save</button>
                <button @click="clearForm()" class="btn btn-info">Clear Form</button>
            </form>

Please help, thanks!

Answer

is better if you formated the input date value (birth_date) in your vue code before you send to the backend.

<input type="date" class="form-control" placeholder="Birth Date" required v-model="birth_date">

sumbit(){
    this.dateFormated = moment(birth_date).format('YYYY-MM-DD');
    //then you send dateFormated variable instead of birth_date
}

Advertisement

Answer