javascript - 如何修复“未捕获的 PDOException:...从字符串转换日期和/或时间时转换失败”?
问题描述
我正在使用全日历开发活动日历。在日历上删除事件后,我收到上述错误。似乎需要转换日期格式,我不确定该怎么做。在我之前的一个问题中,有人建议像 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;
}
索引.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 文件中。如果您也想查看该代码,请告诉我,也将发布该代码。
解决方案
如果您正在使用 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/。
推荐阅读
- graphql - Apollo v3 GraphQL 订阅错误:必须提供文档
- c - 我可以使用 gdb 编辑代码行吗?是否也可以在同一个调试会话中保存到实际的源文件和头文件?linux
- .net - 改变当前文化
- javascript - NestJS - 预期未定义为 GraphQL 模式
- c++ - 如何解决这个一个或多个多重定义符号发现错误?
- java - 如何将wsdl文件转换为java文件
- c - C编程语言示例1.9的难点
- mysql - mysql group by 从总和中删除结果
- javascript - “为什么”JavaScript 提升“let”和“const”变量并将它们保持在临时区域中?那么这种行为有什么好处呢?
- laravel - 如何在 Laravel Query Builder 中批量更新(编辑)?