Laravel中如何实现日期的DD / MMM / YYYY格式显示、编辑与保存？

我之前也遇到过一模一样的问题，用三个下拉框处理日期联动简直头大！后来发现用轻量的前端日期选择器就能完美解决，完全不用自己写复杂的逻辑，推荐用Flatpickr——配置简单、功能全，刚好匹配你的所有需求：

核心优势 #

不用处理月份天数联动、闰年判断这些繁琐逻辑，所有日期合法性校验、格式转换都由工具自动完成，同时满足：

• 前端显示 DD / MMM / YYYY 格式
• 提交给后端的是标准 YYYY-MM-DD 格式
• 回显时自动把后端的日期转换成指定格式展示

具体实现步骤 #

1. 引入Flatpickr依赖（CDN方式最快捷）

在视图的<head>和<body>末尾分别引入CSS和JS：

<!-- 引入Flatpickr样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- 引入Flatpickr脚本 -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

2. 表单中添加日期输入框

不管用原生HTML还是Laravel Collective Form，只需要一个输入框即可：

原生HTML写法

<input 
  type="text" 
  name="profile_date" 
  id="profile_date" 
  class="form-control flatpickr-date"
  value="{{ old('profile_date', $user->profile_date ? $user->profile_date->format('Y-m-d') : '') }}"
>

Laravel Collective Form写法

{!! Form::text(
    'profile_date', 
    old('profile_date', $user->profile_date ? $user->profile_date->format('Y-m-d') : ''), 
    ['class' => 'form-control flatpickr-date', 'id' => 'profile_date']
) !!}

3. 配置Flatpickr实现格式转换

在页面末尾添加JS初始化代码，关键配置dateFormat（前端显示格式）和altInput/altFormat（后端提交格式）：

document.addEventListener('DOMContentLoaded', function() {
    flatpickr('.flatpickr-date', {
        dateFormat: "d / M / Y", // 前端显示：DD / MMM / YYYY
        altInput: true,          // 生成隐藏的真实提交字段
        altFormat: "Y-m-d",      // 后端接收的标准格式
        allowInput: true,        // 允许手动输入日期（可选）
        maxDate: "today"         // 限制最大日期为今天（可选）
    });
});

4. Laravel后端处理

提交和回显逻辑和普通日期字段完全一致，不用额外拆分处理：

保存/更新逻辑

public function update(Request $request, User $user)
{
    // 验证日期合法性
    $request->validate([
        'profile_date' => 'required|date',
    ]);

    // 直接存入数据库的date类型字段
    $user->update([
        'profile_date' => $request->profile_date,
    ]);

    return redirect()->back()->with('success', '个人资料更新成功');
}

为什么这比之前的方法好？ #

• 零手写联动逻辑：Flatpickr自动处理不同月份的天数、闰年等所有边界情况
• 代码极简：一个输入框+几行JS配置，替代三个下拉框+大量联动代码
• 用户体验更好：日历选择比下拉选日期更直观
• 格式自动转换：前端显示和后端提交格式完全分离，不用手动处理转换

如果习惯用Bootstrap生态，也可以用Bootstrap Datepicker替代，配置逻辑类似，但Flatpickr更轻量、无框架依赖，适配性更强。

备注：内容来源于stack exchange，提问作者Roshan Bhusal