Laravel中如何将数据库日期显示到Blade的datetimepicker组件

针对你的场景（数据库日期值为2022-10-31，使用Blade模板和jQuery datetimepicker），有两种可靠的实现方式：

方法1：Blade模板直接赋值 #

利用Blade的模板渲染能力，将后端传递的数据库日期格式化后绑定到input的value属性，确保格式与datetimepicker的format参数匹配。

假设后端传递的日期变量为$dbDate，使用Laravel内置的Carbon工具格式化：

<div class="input-group date" id="allDay" data-target-input="nearest">
    <input type="text" id="all-value" name="all_day"
        class="form-control datetimepicker-input" data-target="#allDay"
        value="{{ \Carbon\Carbon::parse($dbDate)->formatLocalized('%x') }}" />
    <div class="input-group-append" data-target="#allDay" data-toggle="datetimepicker">
         <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
</div>

• %x对应moment.js的L格式（即你设置的format: 'L'），会根据本地化设置输出匹配的日期格式（如美式10/31/2022、欧式31/10/2022）。
• 若不需要本地化，可直接指定固定格式，比如对应MM/DD/YYYY：value="{{ \Carbon\Carbon::parse($dbDate)->format('m/d/Y') }}"

方法2：JavaScript初始化时设置默认日期 #

在datetimepicker初始化配置中添加defaultDate参数，直接传入数据库日期字符串（组件会自动解析标准YYYY-MM-DD格式）：

$('#allDay,#startLongDay,#endLongDay').datetimepicker({
    format: 'L',
    minDate: new Date(),
    defaultDate: '2022-10-31' // 替换为实际数据库日期值
});

如果日期值来自后端传递，可通过Blade注入到JS：

const dbDate = '{{ $dbDate }}';
$('#allDay,#startLongDay,#endLongDay').datetimepicker({
    format: 'L',
    minDate: new Date(),
    defaultDate: dbDate
});

关键注意点 #

• 若出现日期解析异常，可使用moment.js手动转换格式：

  defaultDate: moment('2022-10-31').format('L')
  

• 两种方法任选其一即可：模板赋值更适合静态场景，JS设置适配动态加载日期的需求。

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