本文介绍如何在 laravel 中不依赖 ajax，通过传统表单提交方式实现订单创建时间的日期范围筛选，涵盖控制器逻辑修正、 blade 表单构建、日期格式处理及数据库查询优化。
本文介绍如何在 laravel 中不依赖 ajax，通过传统表单提交方式实现订单创建时间的日期范围筛选，涵盖控制器逻辑修正、 blade 表单构建、日期格式处理及数据库查询优化。
要在 Laravel 中实现无需 AJAX 的日期范围筛选，关键在于：正确提交表单、安全解析用户输入的日期、精准匹配数据库中的 created_at 时间字段（含时分秒）。原代码存在多个核心问题：未定义表单 <form></form> 及提交方式；前端 DatePicker 插件（如 jQuery UI Datepicker）未绑定提交行为；后端未校验/容错空值或非法日期；whereBetween 直接使用 Y-m-d 截断会丢失时间精度，导致跨日数据遗漏。
✅ 正确实现步骤
1. 构建可提交的表单（Blade 视图）
在 table.blade.php 中，将日期输入框包裹在 <form></form> 内，并指定 GET 方法（便于调试与 URL 可见性）：
<form method="GET" action="{{ route('orders.daterange') }}" class="mb-4">
<div class="row">
<div class="col-md-4">
<label for="datepicker_from">起始日期</label>
<input
type="text"
id="datepicker_from"
name="datepicker_from"
class="form-control"
value="{{ request('datepicker_from') }}"
placeholder="YYYY-MM-DD"
autocomplete="off"
>
</div>
<div class="col-md-4">
<label for="datepicker_to">截止日期</label>
<input
type="text"
id="datepicker_to"
name="datepicker_to"
class="form-control"
value="{{ request('datepicker_to') }}"
placeholder="YYYY-MM-DD"
autocomplete="off"
>
</div>
<div class="col-md-4 d-flex align-items-end">
<button type="submit" class="btn btn-primary w-100">筛选</button>
</div>
</div>
</form>? 提示：使用
request('xxx')保持搜索条件在刷新后仍显示，提升用户体验。
2. 配置前端日期选择器（推荐使用 flatpickr 或 daterangepicker）
原代码中混用多次 $("#datepicker_from").datepicker(...)，且未初始化插件。建议统一使用轻量、兼容性好的 flatpickr（无需 jQuery）：
<!-- 在 @section('scripts') 中引入 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
flatpickr("#datepicker_from", {
dateFormat: "Y-m-d",
maxDate: new Date(), // 不允许选择未来日期
onChange: function(selectedDates, dateStr) {
if (dateStr) {
const toPicker = flatpickr("#datepicker_to", {
minDate: dateStr,
dateFormat: "Y-m-d",
maxDate: new Date()
});
}
}
});
flatpickr("#datepicker_to", {
dateFormat: "Y-m-d",
maxDate: new Date()
});
});
</script>3. 修正控制器逻辑（健壮 & 安全）
// app/Http/Controllers/OrderController.php
use Illuminate\Http\Request;
use Carbon\Carbon;
use DB;
public function daterange(Request $request)
{
// 初始化查询构建器
$query = DB::table('order_items');
// 安全获取并验证日期参数
$from = $request->input('datepicker_from');
$to = $request->input('datepicker_to');
// 仅当两个日期均有效时才应用范围筛选
if ($from && $to) {
try {
$start = Carbon::createFromFormat('Y-m-d', $from)->startOfDay();
$end = Carbon::createFromFormat('Y-m-d', $to)->endOfDay();
$query->whereBetween('created_at', [$start, $end]);
} catch (\Exception $e) {
// 日期格式错误时忽略筛选，或返回提示（需配合 session flash）
\Log::warning('Invalid date range input: ' . $e->getMessage());
}
}
$dateRange = $query->get();
return view('profiles.dateRange', [
'date_range' => $dateRange,
'from' => $from,
'to' => $to
]);
}✅ 关键改进：
- 使用
startOfDay()/endOfDay()精确覆盖全天（避免因created_at含时分秒导致漏数据）；- 强制
Y-m-d格式解析，杜绝DD-MM-YYYY带来的歧义；- 加入异常捕获，防止非法输入崩溃应用；
- 支持空参数回退为全量查询。
4. 路由定义（确保命名路由可用）
// routes/web.php
Route::get('/orders/daterange', [OrderController::class, 'daterange'])
->name('orders.daterange');5. （可选）优化查询性能
若数据量大，建议为 created_at 字段添加数据库索引：
ALTER TABLE order_items ADD INDEX idx_created_at (created_at);
⚠️ 注意事项总结
- ❌ 不要直接用
->format('Y-m-d')截断时间再whereBetween—— 这会把2024-01-01 15:30:00变成'2024-01-01'，导致whereBetween('created_at', ['2024-01-01', '2024-01-01'])仅匹配当天 00:00:00 的记录； - ✅ 始终使用
Carbon::startOfDay()和Carbon::endOfDay()构造完整时间范围； - ✅ 前端日期插件输出格式必须与后端
createFromFormat()严格一致（推荐Y-m-d）； - ✅ 表单必须有明确
action和method，否则点击按钮不会触发控制器； - ✅ 若使用 Laravel Scout 或 DataTables Server-side Processing，此方案仍适用 —— 只需将筛选逻辑整合进对应查询构造器中。
通过以上改造，即可在零 AJAX 依赖下，稳定、安全、可维护地实现 Laravel 日期范围筛选功能。
