Laravel+React(MUI日期选择器)预约日期存储异常问题

问题现象 #

使用Laravel后端+React MUI日期选择器实现预约日期存储功能时，选择如2024/02/02的日期，数据库中date字段始终存储当前日期（示例返回中为2023-12-06），调整日期格式后问题依旧，但其他预约信息能正常存储。

后端代码 #

public function store(Request $request)
{
    $formattedDateHeader = Carbon::parse($request->input('date'))->toDateString();

    $reservation = Reservation::create([
        'fullname'          => $request->input('fullname'),
        'service_meet'      => $request->input('service_meet'),
        'date'              => $formattedDateHeader,
        'start_date_time'   => $request->input('start_date_time'),
        'end_date_time'     => $request->input('end_date_time'),
        'status'            => 'en cours', // 默认状态
        'salle_id'          => $request->input('salle_id'),
    ]);
    return response()->json([
        'status' => 200,
        'message' => 'reservation passed successfully',
        'reservation' => $reservation
    ]);
}

返回示例 #

{
    "status": 200,
    "message": "reservation passed successfully",
    "reservation": {
        "created_at": "2023-12-06T17:01:27.000000Z",
        "date": "2023-12-06", // 异常字段
        "end_date_time": "22:01",
        "fullname": "ademo tens",
        "id": 20,
        "salle_id": 9,
        "service_meet": "meeting1",
        "start_date_time": "18:05",
        "status": "en cours",
        "updated_at": "2023-12-06T17:01:27.000000Z"
    }
}

排查与解决步骤 #

1. 验证前端传入的日期参数 #

• 在前端调用接口前，打印要传递的date值，确认是否为选中的目标日期（如2024/02/02）。MUI日期选择器默认返回Date对象，若直接传递会导致后端解析异常，需转换为指定格式的字符串。

2. 后端调试接收的日期值 #

• 在store方法开头添加调试代码，查看实际接收到的date参数：

  dd($request->input('date')); // 输出接收到的日期内容
  

  若返回null或格式错误的字符串，Carbon::parse()会默认使用当前日期。

3. 强制指定日期解析格式 #

• 避免依赖Carbon的自动解析，根据前端传递的格式明确指定解析规则，比如前端传YYYY/MM/DD格式：

  // 替换原解析代码
  $formattedDateHeader = Carbon::createFromFormat('Y/m/d', $request->input('date'))->toDateString();
  

  格式不匹配时会抛出异常，便于快速定位问题。

4. 前端统一日期输出格式 #

• 配置MUI日期选择器，确保传递给后端的是格式化后的字符串：

  import { DatePicker } from '@mui/x-date-pickers/DatePicker';
  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
  import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
  
  // 组件内使用
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <DatePicker
      label="选择预约日期"
      value={selectedDate}
      onChange={(newDate) => {
        // 转换为指定格式的字符串
        const formattedDate = newDate.format('YYYY/MM/DD');
        // 将formattedDate存入请求参数
        setFormData({...formData, date: formattedDate});
      }}
    />
  </LocalizationProvider>
  

5. 检查模型可填充字段 #

• 确认Reservation模型中date字段在$fillable数组内，否则create方法无法填充该字段，可能使用数据库默认值：

  class Reservation extends Model
  {
      protected $fillable = [
          'fullname',
          'service_meet',
          'date', // 必须包含此字段
          'start_date_time',
          'end_date_time',
          'status',
          'salle_id',
      ];
  }
  

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