允许用户通过日历浮层选择日期或日期范围,非常适合用于筛选数据或安排活动。
对于诸如生日等遥远的未来或过去事件,请使用日期输入而非日期选择器。
<flux:date-picker />
<flux:date-picker value="2025-10-12" />
<flux:date-picker wire:model="date" />
<?phpuse Illuminate\Support\Carbon;use Livewire\Component;use App\Models\Post;class CreatePost extends Component { public ?Carbon $date; public function save() { Post::create([ // ... 'published_at' => $this->date, ]) // ... }}
将日期选择器附加到日期输入框,以获得更精确的日期选择控制。
<flux:date-picker wire:model="date"> <x-slot name="trigger"> <flux:date-picker.input /> </x-slot></flux:date-picker>
启用日期范围选择,可用于报表、预订系统或任何需要起止日期的场景。
<flux:date-picker mode="range" />
<flux:date-picker mode="range" value="2025-10-02/2025-10-06" />
<flux:date-picker mode="range" wire:model="range" />
<?phpuse Illuminate\Support\Carbon;use Livewire\Component;class Dashboard extends Component { public array $range; public function mount() { $this->range = [ 'start' => now()->subMonth()->format('Y-m-d'), 'end' => now()->format('Y-m-d'), ]; }}
<?phpuse Livewire\Component;use Flux\DateRange;class Dashboard extends Component { public DateRange $range; public function mount() { $this->range = new DateRange(now()->subMonth(), now()); }}
控制可选日期范围的允许值。
<flux:date-picker mode="range" min-range="3" />
<flux:date-picker mode="range" max-range="10" />
为开始和结束日期分别提供输入框,可让日期范围选择界面更加清晰。
<flux:date-picker mode="range"> <x-slot name="trigger"> <div class="flex flex-col sm:flex-row gap-6 sm:gap-4"> <flux:date-picker.input label="Start" /> <flux:date-picker.input label="End" /> </div> </x-slot></flux:date-picker>
允许用户选择常用的日期范围,例如“最近 7 天”或“本月”。
<flux:date-picker mode="range" with-presets />
<flux:date-picker mode="range" presets="today yesterday thisWeek last7Days thisMonth yearToDate allTime"/>
|
键名
|
显示文本
|
构造器
|
日期范围
|
|---|---|---|---|
| Today | 当天 | ||
| Yesterday | 前一天 | ||
| This Week | 本周 | ||
| Last Week | 上一周 | ||
| Last 7 Days | 前 7 天 | ||
| This Month | 本月 | ||
| Last Month | 上一月 | ||
| This Quarter | 本季度 | ||
| Last Quarter | 上一季度 | ||
| This Year | 本年度 | ||
| Last Year | 上一年度 | ||
| Last 14 Days | 前 14 天 | ||
| Last 30 Days | 前 30 天 | ||
| Last 3 Months | 前 3 个月 | ||
| Last 6 Months | 前 6 个月 | ||
| Year to Date | 当年 1 月 1 日至今日 | ||
| All Time | 最早提供日期至今日 | ||
| Custom Range | 用户自定义日期范围 |
<flux:date-picker mode="range" presets="... allTime" :min="auth()->user()->created_at->format('Y-m-d')"/>
use Flux\DateRange;$this->range = DateRange::allTime(start: auth()->user()->created_at);
$orders = Order::when($this->range->isNotAllTime(), function ($query) => { $query->whereBetween('created_at', $this->range);})->get();
<flux:date-picker mode="range" presets="... custom" />
禁用特定日期的选择。可用于屏蔽节假日、展示已被预订的日期或标记不可用的时间段。
<flux:date-picker unavailable="2025-10-11,2025-10-13" />
默认情况下,日期选择器会使用浏览器的本地化设置(例如 navigator.language)。
你可以通过将 locale 属性设置为任意有效的本地化字符串来覆盖此行为(例如法语的 fr、英语的 en-US 等):
<flux:date-picker locale="ja-JP" />
<flux:calendar wire:model.live="range" />
<?phpuse Livewire\Component;use Flux\DateRange;class Dashboard extends Component { public DateRange $range;}
<?phpuse Livewire\Component;use Flux\DateRange;class Dashboard extends Component { public DateRange $range; public function mount() { $this->range = new DateRange(now(), now()->addDays(7)); }}
<?phpuse Livewire\Attributes\Session;use Livewire\Component;use Flux\DateRange;class Dashboard extends Component { #[Session] public DateRange $range;}
<?phpuse Livewire\Attributes\Computed;use Livewire\Component;use App\Models\Order;use Flux\DateRange;class Dashboard extends Component { public ?DateRange $range; #[Computed] public function orders() { return $this->range ? Order::whereBetween('created_at', $this->range)->get() : Order::all(); }}
$range = new Flux\DateRange( now()->subDays(1), now()->addDays(1),);// Get the start and end dates as Carbon instances...$start = $range->start();$end = $range->end();// Check if the range contains a date...$range->contains(now());// Get the number of days in the range...$range->length();// Loop over the range by day...foreach ($range as $date) { // $date is a Carbon instance...}// Get the range as an array of Carbon instances representing each day in the range...$range->toArray();
$orders = Order::whereBetween('created_at', $range)->get();
[ 'start' => null, 'end' => null, 'preset' => 'lastMonth',]
<?phpuse Livewire\Component;class Dashboard extends Component { public array $range; public function mount() { $this->range = [ 'start' => null, 'end' => null, 'preset' => 'lastMonth', ]; }}
<?phpuse Livewire\Component;use Flux\DateRange;class Dashboard extends Component { public DateRange $range; public function mount() { $this->range = DateRange::lastMonth(); }}
$this->range->preset();// This will return a value like `DateRangePreset::LastMonth`...
|
属性
|
说明
|
|---|---|
| wire:model |
将日期选择器绑定到 Livewire 属性。更多信息请参阅 wire:model 文档。
|
| value |
选中的日期。格式取决于 mode:单日期(Y-m-d)或范围(Y-m-d/Y-m-d)。
|
| mode |
选择模式。可选值:single(默认)、range。
|
| min-range |
范围模式下可选择的最少天数。
|
| max-range |
范围模式下可选择的最多天数。
|
| min |
可选择的最早日期。可以是日期字符串或 "today"。
|
| max |
可选择的最晚日期。可以是日期字符串或 "today"。
|
| months |
要显示的月份数量。默认: 1单选模式为 2,范围模式为 2。
|
| label |
显示在日期选择器上方的标签文本。提供后,会将组件包裹在 flux:field 中,并在旁侧呈现 flux:label.
|
| description |
显示在日期选择器下方的帮助文本。与 label 一同提供时,会在 flux:field 包裹内显示在标签与日期选择器之间。
|
| description:trailing |
提供的描述将显示在日期选择器下方,而非上方。
|
| badge |
当提供 flux:label 属性时,在 label 组件末尾显示的徽章文本。
|
| placeholder |
未选择日期时显示的占位文本。默认值取决于 mode.
|
| size |
日历日期单元的大小。可选值: sm, default, lg, xl, 2xl.
|
| start-day |
日历的周起始日。可选值: 0(星期日)至 6(星期六)。默认:基于用户的语言地区。
|
| week-numbers |
若为 true,则在日历中显示周序号。
|
| selectable-header |
若为 true,则显示月份和年份下拉框以便快速导航。
|
| with-today |
若为 true,则显示一个按钮用于快速跳转到今天。
|
| with-inputs |
若为 true,则在日历顶部显示日期输入框以便手动输入。
|
| with-confirmation |
若为 true,则在应用所选日期前需要确认。
|
| with-presets |
若为 true,则显示预设日期范围。可与 presets 搭配以自定义可用选项。
|
| presets |
以空格分隔的预设日期范围列表。默认值: today yesterday thisWeek last7Days thisMonth yearToDate allTime.
|
| clearable |
当选择了日期时显示清除按钮。
|
| disabled |
禁止用户与日期选择器交互。
|
| invalid |
为日期选择器应用错误样式。
|
| locale |
设置日期选择器使用的本地化。示例: fr, en-US, ja-JP.
|
|
插槽
|
描述
|
|---|---|
| trigger |
用于打开日期选择器的自定义触发元素。通常是 flux:date-picker.input 或 flux:date-picker.button。
|
|
属性
|
描述
|
|---|---|
| data-flux-date-picker |
应用于根元素,用于样式和标识。
|
|
属性
|
描述
|
|---|---|
| label |
显示在输入框上方的标签文本。提供该属性时,会将输入框包裹在 flux:field 组件中,并配套一个相邻的 flux:label 组件。
|
| description |
显示在输入框下方的帮助文本。与 label 一起提供时,会出现在 flux:field 包裹内的标签与输入框之间。
|
| placeholder |
未选择日期时显示的占位文本。
|
| clearable |
选中日期时显示清除按钮。
|
| disabled |
禁止用户与输入框交互。
|
| invalid |
为输入框应用错误样式。
|
|
属性
|
描述
|
|---|---|
| placeholder |
未选择日期时显示的文本。
|
| size |
按钮的尺寸。可选值:sm、xs。
|
| clearable |
选中日期时显示清除按钮。
|
| disabled |
禁止用户与按钮交互。
|
| invalid |
为按钮应用错误样式。
|
在使用 mode="range" 时用于处理日期范围的专用对象。
|
方法
|
描述
|
|---|---|
| $range->start() |
以 Carbon 实例获取开始日期。
|
| $range->end() |
以 Carbon 实例获取结束日期。
|
| $range->days() |
获取范围内的天数。
|
| $range->preset() |
以 DateRangePreset 枚举值获取当前预设。
|
| $range->toArray() |
以包含 start 和 end 键的数组形式获取范围。
|
|
静态方法
|
描述
|
|---|---|
| DateRange::today() |
创建一个表示今日的 DateRange。
|
| DateRange::yesterday() |
创建一个表示昨日的 DateRange。
|
| DateRange::thisWeek() |
创建一个表示本周的 DateRange。
|
| DateRange::lastWeek() |
创建一个表示上周的 DateRange。
|
| DateRange::last7Days() |
创建一个表示过去 7 天的 DateRange。
|
| DateRange::last30Days() |
创建一个表示过去 30 天的 DateRange。
|
| DateRange::thisMonth() |
创建一个表示本月的 DateRange。
|
| DateRange::lastMonth() |
创建一个表示上月的 DateRange。
|
| DateRange::thisQuarter() |
创建一个表示本季度的 DateRange。
|
| DateRange::lastQuarter() |
创建一个表示上季度的 DateRange。
|
| DateRange::thisYear() |
创建一个表示本年的 DateRange。
|
| DateRange::lastYear() |
创建一个表示去年的 DateRange。
|
| DateRange::yearToDate() |
创建一个从 1 月 1 日至今日的 DateRange。
|
| DateRange::allTime() |
创建一个无限制的 DateRange。
|