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

Question

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

Answer 1

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