使用flatpickr展示、解析及存取数据库日期的问题排查

问题根源 #

你的代码里自定义了parseDate和formatDate函数，其中parseDate错误返回格式化后的字符串，而Flatpickr要求该函数必须返回Date对象，这导致组件无法正确解析输入框中已有的日期值，进而无法在输入框显示。另外，formatDate的自定义完全多余，默认行为就是调用flatpickr.formatDate。

修正后的初始化代码 #

function flatpickrInitialization(selector) {
    $(selector).flatpickr({
        dateFormat: "Y-m-d H:i", // 注意：分钟用i而非m，m代表月份
        enableTime: true,
        minDate: "today",
        allowInput: true
        // 移除多余的formatDate和错误的parseDate
    });
}

关键注意事项 #

• 日期格式修正：原配置里的dateFormat写为H:m，其中m是月份标识，分钟应该用i，修正后格式与数据库存储的2022-08-17 12:00:00完全匹配。
• 确保初始化前输入框已有值：调用flatpickrInitialization之前，要确认目标输入框的value属性已填充数据库中的日期值（如2022-08-17 12:00:00），Flatpickr会自动识别并解析该值，同步到输入框显示。
• 移除无效自定义函数：不需要自定义formatDate和parseDate，Flatpickr默认实现已能处理符合dateFormat的日期字符串。

验证步骤 #

1. 初始化前检查输入框的value是否正确填充了数据库日期
2. 使用修正后的代码重新初始化Flatpickr
3. 打开编辑页面，输入框应自动显示已保存的日期值

内容的提问来源于stack exchange，提问作者marcushorndt