How to fix "Uncaught PDOException: ...Conversion failed when converting date and/or time from character string"?

Question

I'm developing an event calendar using full-Calendar. I'm getting the above error after an event has been dropped on the calendar. It seems that the date format needs to be converted, I'm not sure exactly how should I do that. In one of my previous questions I was suggested that something like yyyy-mm-dd hh:mm would work better and that should be done using momentJs.

As I'm very new to js, I'm not sure how and what exactly should I change in my code.

Here's the code:

   document.addEventListener('DOMContentLoaded', function() {
  var Calendar = FullCalendar.Calendar;
  var Draggable = FullCalendarInteraction.Draggable;

  var containerEl = document.getElementById('external-events');
  var calendarEl = document.getElementById('calendar');
  var checkbox = document.getElementById('drop-remove');


 new Draggable(containerEl, {
    itemSelector: '.fc-event',
    eventData: function(eventEl) {
    return {
      title: eventEl.innerText
     };
   }
  });

 var calendar = new Calendar(calendarEl, {
 plugins: ['interaction', 'dayGrid', 'timeGrid'],
 header: {
   left: 'prev,next today',
  center: 'title',
  right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
droppable: true,
eventReceive: function(info) {

  //get the bits of data we want to send into a simple object
  var eventData = {
    title: info.event.title,
    start: info.event.start,
    end: info.event.end
  };
  console.log(eventData);
  //send the data via an AJAX POST request, and log any response which comes from the server
  fetch('add_event.php', {
      method: 'POST',
      headers: {
        'Accept': 'application/json'
      },
      body: encodeFormData(eventData)
    })
    .then(response => console.log(response))
    .catch(error => console.log(error));
    }
 });
  calendar.render();
});

const encodeFormData = (data) => {
  var form_data = new FormData();

for (var key in data) {
   form_data.append(key, data[key]);
  }
  return form_data;
}

index.php

<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js'></script>


<div id='external-events'>
  <p>
<strong>Draggable Events</strong>
 </p>
 <div class='fc-event'>My Event 1</div>
  <div class='fc-event'>My Event 2</div>
  <div class='fc-event'>My Event 3</div>
  <div class='fc-event'>My Event 4</div>
  <div class='fc-event'>My Event 5</div>
  <p>
    <input type='checkbox' id='drop-remove' />
    <label for='drop-remove'>remove after drop</label>
  </p>
</div>
<div id='calendar-container'>

add_event.php

require 'connection.php';
    $title = $_POST['title'];
    $start = $_POST['start'];
    $end = $_POST['end'];
        $conn = DB::databaseConnection();
       $conn->beginTransaction();
$sqlInsert = "INSERT INTO Events ( title, start, [end]) VALUES ( :title, :start, :end)";
    $stmt = $conn->prepare($sqlInsert);
    $stmt->bindParam(':title', $title);
    $stmt->bindParam(':start', $start);
    $stmt->bindParam(':end', $end);
    if ($stmt->execute()) {
            $conn->commit();
            return true;
        } else {
            $conn->rollback();
            return false;
        }

    ?>

The event details needs to be saved in a ms-sql database. The function for that is in the add_event.php file. Please let me know if you would like to see the code for that too, will post that too.

Answer 1

If you're using momentJS, and, assuming you've included the momentJS file in your page already, then:

start:moment(info.event.start).format("YYYY-MM-DD HH:mm"),
end:moment(info.event.start).format("YYYY-MM-DD HH:mm" )

should do the trick. See https://momentjs.com/docs/#/displaying/format/ for details.