javascript - 如何修复 "Uncaught PDOException: ...Conversion failed when converting date and/or time from character string"？

Question

我正在使用完整日历开发事件日历。在日历上删除事件后，我收到上述错误。看来日期格式需要转换，我不知道到底应该怎么做。在我之前的一个问题中，有人建议我使用 yyyy-mm-dd hh:mm 之类的方法会更好，并且应该使用 momentJs 来完成。

由于我对 js 非常陌生，所以我不确定我的代码应该如何以及到底应该更改什么。

代码如下:

   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;
        }

    ?>

事件详细信息需要保存在 ms-sql 数据库中。该函数位于 add_event.php 文件中。如果您也想查看该代码，请告诉我，我也会发布该代码。

Answer 1

如果您正在使用 momentJS，并且假设您已在页面中包含 momentJS 文件，则:

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

应该可以解决问题。请参阅https://momentjs.com/docs/#/displaying/format/了解详情。