Lavarel don't accept Js Date format from Vue with axios, catch an 500 Internal Error

user_11041289 0
Viewed 324

I have an Vue component, passing dates with axios requests.

I have an input where i introduce the date, for ex. ("2021-03-06"), it's working, but if i use an datePicker it's doesn't.

public function store()
    {

        $attributes = request();

        Task::create([
            'name' => $attributes['name'],
            'client_id' => $attributes['client_id'],
            'task_date' => $attributes['task_date'],
            'state' => 1,
            'type' => $attributes['type'],
            'details' => $attributes['details'],
            'invoiced_date' => $attributes['invoiced_date'],
            'programing_worked_minutes' => $attributes['programing_worked_minutes'],
            'support_worked_minutes' => $attributes['support_worked_minutes'],
            'closed_date' => null,
        ]);
        return 1;
    }

        <datepicker
                    v-model="task.task_date"
                    :lower-limit="new Date()"
                    placeholder="click here to choose a date"
                    id="task_date"
                    name="task.task_date"
                    class="block rounded p-0 shadow-inner  border-gray-300 w-1/2"
                    required
                />

export default {
    name: "addTask",
    components: {
        Datepicker
    },
    data() {
        return {
            task: {
                name: null,
                client_id: null,
                task_date: null,
                type: null,
                details: null,
                invoiced_date: null,
                programing_worked_minutes: null,
                support_worked_minutes: null,
            },

            message: "",
            visual_spinner: false,
        }
    },
    methods: {
        sendData() {
            this.message = '';
            this.visual_spinner = true;
            axios.post('/create-task', {
                name: this.task.name,
                client_id: this.task.client_id,
                task_date: this.task.task_date,
                type: this.task.type,
                details: this.task.details,
                invoiced_date: this.task.invoiced_date,
                programing_worked_minutes: this.task.programing_worked_minutes,
                support_worked_minutes: this.task.support_worked_minutes,

            })
                .then((response) => {
                    this.onSuccess();
                })
                .catch(function (error) {
                    console.log(error);

                });
        },

So, the request it working well, the problem is with the format Date , if is 2021-03-01 its working but if it's Sat Mar 13 2021 00:00:00 GMT+0200 (Eastern European Standard Time) not working

Thank you

laravel vue.js client-side
3 Answers

Sun Mar 07 2021 00:17:59 GMT+0600 (Bangladesh Standard Time) vs 2021-03-07 is not the same. 500 internal error means something happens on server side. I guess, the problem is coming from your Laravel Database Schema as example: $table->dateTime('task_date'); replace with $table->string('task_date'); Then migrate.

user_133273840

If the problem is with the date format, you could format it into the expected format before submitting it to the database.

Once the JavaScript date format Sat Mar 13 2021 00:00:00 GMT+0200 (Eastern European Standard Time) has been received by Laravel, you could format it using Carbon PHP library which already comes with the framework. i.e:


use Carbon\Carbon;


$javaScriptDateFormat = "Sat Mar 13 2021 00:00:00 GMT+0200 (Eastern European Standard Time)";
$date = explode("(", $javaScriptDateFormat, 2)[0];
$formattedDate = Carbon::parse($date)->format('Y-m-d');
print_r($formattedDate); // "2021-03-13"

ADDENDUM

Another alternative is that you could use Moment.js to format the 'date string' got from datePicker Sat Mar 13 2021 00:00:00 GMT+0200 (Eastern European Standard Time) into the expected format before sending it to the server. i.e:

import moment from "moment";

const date = new Date("Sat Mar 13 2021 00:00:00 GMT+0200 (Eastern European Standard Time)");
console.log(moment(date).format("YYYY-MM-DD"));  // 2021-03-13

Since Moment.js has been discontinued, as suggested by @AnuratChapanond, use Day.js instead as an alternative.

import dayjs from "dayjs";

const date = new Date("Sat Mar 13 2021 00:00:00 GMT+0200 (Eastern European Standard Time)");
console.log(dayjs(date).format("YYYY-MM-DD"));  // 2021-03-13
user_73765900

Finally i used

formatDate(date) {
            var d = new Date(date),
                month = '' + (d.getMonth() + 1),
                day = '' + d.getDate(),
                year = d.getFullYear();

            if (month.length < 2)
                month = '0' + month;
            if (day.length < 2)
                day = '0' + day;

            return [year, month, day].join('-');
        }

to convert Sat Mar 13 2021 00:00:00 GMT+0200 (Eastern European Standard Time) into 2021-03-13

user_110412890
Related