允许用户通过日历浮层选择日期或日期范围,非常适合用于筛选数据或安排活动。
对于诸如生日等遥远的未来或过去事件,请使用日期输入而非日期选择器。
<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。 |