无法让Bootstrap DateTime Picker在表单字段中显示格式化的数据库值

问题根源 #

你遇到的1899年默认日期问题是日期格式不匹配导致的：Bootstrap DateTime Picker要求传入initialDate的字符串格式必须和配置的format参数完全一致，你之前直接输出{{ $post->post_date }}默认是Laravel的Y-m-d H:i:s格式，和你设置的mm/dd/yyyy hh:ii格式不匹配，组件解析失败就会 fallback 到最早的默认日期。

解决步骤 #

1. 先配置模型日期字段（已配置可跳过） #

确保你的app/Models/Post.php中已经将post_date标记为日期字段，这样才能调用format方法格式化：

// 方式1：$dates数组
protected $dates = [
    'post_date',
];

// 方式2：$casts属性（Laravel 7+推荐）
protected $casts = [
    'post_date' => 'datetime',
];

2. 修改输入框代码 #

给输入框的value赋值和format匹配的格式化日期，同时确保输入框有form_datetime类和JS选择器对应：

<input 
    class="form-control form_datetime @error('post_date') is-invalid @enderror"  
    type="text" 
    value="{{ $post->post_date->format('m/d/Y H:i') }}" 
    readonly 
    id="post_date" 
    name="post_date"
>

3. 修改DateTime Picker初始化配置 #

将initialDate也替换为同格式的日期字符串：

<script src="{{asset('/assets/plugins/bootstrap-datetime-picker/js/bootstrap-datetimepicker.js')}}"></script>
<script>
$(".form_datetime").datetimepicker({
    format: "mm/dd/yyyy hh:ii",
    initialDate:  "{{ $post->post_date->format('m/d/Y H:i') }}",
    autoclose: true,
    todayBtn: true,
    pickerPosition: "bottom-left",
    minuteStep: 10
});
</script>

兜底方案（如果上述配置仍不生效） #

部分版本的组件会优先读取输入框值，你可以去掉initialDate配置，初始化完成后手动调用setDate方法赋值：

const $datePicker = $(".form_datetime").datetimepicker({
    format: "mm/dd/yyyy hh:ii",
    autoclose: true,
    todayBtn: true,
    pickerPosition: "bottom-left",
    minuteStep: 10
});
// 手动设置日期
$datePicker.datetimepicker('setDate', new Date("{{ $post->post_date->format('m/d/Y H:i') }}"));

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