DateTime saved different from what i chose on input-CodePudding

I try to add some event on fullcalendar , filed: title, start, and end. Title is saved correctly but start date and end date is saved wrong on my db. Can anyone help me with this problem?

On input form i chose 2022-01-27 - 2022-01-28

On db is saved 1970-01-01 - 1970-01-01 and time is 00:00

var calendar = $('#calendar').fullCalendar({
        editable:true,
        header:{
            left:'prev,next today',
            center:'title',
            right:'month,agendaWeek,agendaDay'
        },
        events:'/event-calender',
        selectable:true,
        selectHelper: true,
        //When u select some space in the calendar do the following:
        select: function (start, end, allDay) {
            //do something when space selected
            //Show 'add event' modal
            $('#eventModal').modal('show');
        },

  $('#eventSubmit').on('click', function(e){
        // We don't want this to act as a link so cancel the link action
        e.preventDefault();

        doSubmit();
    });
    $('#eventClose').on('click', function(e) {
        $('#eventModal').modal('hide');
    });

    function doSubmit(){
        
        $("#eventModal").modal('hide');
        var start = $.fullCalendar.formatDate(start, 'Y-MM-DD HH:mm:ss');
        var end = $.fullCalendar.formatDate(end, 'Y-MM-DD HH:mm:ss');
        $("#calendar").fullCalendar('renderEvent',
           $.ajax ({
                url:"/event-calender/action",
                type:"POST",
                data:{
                    title: $('#title').val(),
                    start: start,
                    end: end,
                    type: 'add',
                }
            }),
            true);
       }

This is controller

public function action(Request $request)
    {
        if($request->ajax())
        {
            if($request->type == 'add')
            {
                $event = Events::create([
                    'title'     =>  $request->title,
                    'start'     =>  $request->start,
                    'end'       =>  $request->end
                ]);
                // dd($event);
                return response()->json($event);
            }
        }
    }

Event modal

class Events extends Model
{
    protected $table = 'events';

    protected $fillable = [
        'title',
        'start',
        'end'
    ];
}

I changed doSubmit() , and now i get another error like this Uncaught TypeError: Cannot read properties of undefined (reading 'isValid')

CodePudding user response：

You can try to use Carbon.

use Carbon\Carbon;


...

$event = Events::create([
    'title' => $request->title,
    'start  => Carbon::parse($request->start),
    'end' => Carbon::parse($request->end),
]);

When start and / or end are allowed to be null, you can use Carbon::make() instead of Carbon::parse().

Another option is to use Carbon::createFromFormat('Y-m-d', $request->start);

Also, make sure start and end are added to the $fillable property on the Events model.

CodePudding user response：

ANSWER

//When u select some space in the calendar do the following:
        select: function (start, end, allDay) {
            //do something when space selected
            //Show 'add event' modal
            $('#eventModal').modal('show');
            var start = $.fullCalendar.formatDate(start, 'Y-MM-DD HH:mm:ss');
            var end = $.fullCalendar.formatDate(end, 'Y-MM-DD HH:mm:ss');

            $('#eventSubmit').on('click', function(e){
                // We don't want this to act as a link so cancel the link action
                e.preventDefault();

                doSubmit();
            });

            $('#eventClose').on('click', function(e) {
                $('#eventModal').modal('hide');
            });

            function doSubmit(){
                
                $("#eventModal").modal('hide');
                $("#calendar").fullCalendar('renderEvent',
                $.ajax ({
                        url:"/event-calender/action",
                        type:"POST",
                        data:{
                            title: $('#title').val(),
                            start: start,
                            end: end,
                            type: 'add',
                        },
                        success:function(data)
                        {
                            calendar.fullCalendar('refetchEvents');
                            // Swal.fire("Event Created Successfully");
                        }
                    }),
                true);
            }
        },