提问人：marcushorndt 提问时间：10/6/2022 最后编辑：marcushorndt 更新时间：4/12/2023 访问量：803
使用 flatpickr 显示、解析和保存数据库日期的正确方法
Correct way of using flatpickr to display, parse and save dates from/to database
问：
我正在开发一个可以创建事件的 Web 应用程序。 我想用 flatpickr 显示的日期的输入字段。 提交事件和相应的日期可以工作，但是当我尝试使用它来编辑现有日期时，我意识到我遗漏了一些东西。
这是我在创建表单时调用的函数：
function flatpickrInitialization(selector) {
$(selector).flatpickr({
dateFormat: "Y-m-d H:m",
enableTime: true,
minDate: "today",
allowInput: true,
formatDate: (date, time, format) => {
return flatpickr.formatDate(date, time, format);
},
parseDate: (datestr, format) => {
return flatpickr.formatDate(datestr, format);
}
});
}
用于存储日期的日期格式为：
2022-08-17 12:00:00
该问题表现为输入字段不携带最初保存的数据。它们显示没有值的输入 flatpickr 掩码。 flatpickr 脚本创建的隐藏输入字段包含保存的值。
任何帮助表示赞赏！
答：
0赞
Crezzur
4/12/2023
#1
您可以在将所选时间发送到数据库之前使用 javascript/jquery 转换它
let myFlatpickr = $(".flatpickr").flatpickr();
myFlatpickr.setDate(new Date());
$(document).on("click", "#load", function() {
if (myFlatpickr.selectedDates[0] === undefined) return;
let exportdate = myFlatpickr.selectedDates[0].getTime() / 1000;
let db_str = databaseDateTime(myFlatpickr.selectedDates[0]);
$("#result").html(`Timestamp: ${exportdate} <br> DateTime: ${db_str}`);
});
function databaseDateTime(d) {
if (d != null) {
d = new Date(d);
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")} ` + String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0") + ":" + String(d.getSeconds()).padStart(2, "0");
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<input class="flatpickr" type="text">
<button id="load">GetDate</button>
<div id="result" style="margin-top: 25px"></div>
评论