README

此包通过使用 daterangepicker 库向 Filament 控板添加日期范围选择器和过滤器。它提供了通过特定范围或预定义范围（如“今天”，“昨天”等）过滤日期的选项。

安装

您可以通过 composer 安装此包

composer require malzariey/filament-daterangepicker-filter

您可以使用以下命令发布配置文件

可选地，您可以使用以下命令发布视图

php artisan vendor:publish --tag="filament-daterangepicker-filter-views"

使用方法

作为字段

use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangePicker::make('created_at'),

作为过滤器

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at'),

选项

时区

设置选择器的时区，默认为项目时区。例如，将时区设置为 'UTC'。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->timezone('UTC')

起始和结束日期

您可以为过滤器指定初始选定的起始和结束日期。以下示例将过滤器初始化为今天的日期。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->startDate(Carbon::now())->endDate(Carbon::now())

默认今天

您也可以使用以下快捷方式使用上述内容

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->defaultToday()

最小和最大日期

指定日历的最小和最大日期。以下示例将仅启用选择上个月到下个月。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->minDate(Carbon::now()->subMonth())->maxDate(Carbon::now()->addMonth())

一周的第一天

将周一设置为 DateRangeFilter 日历的第一天。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->firstDayOfWeek(1)

始终显示日历

通常，如果您使用范围选项来指定预定义的日期范围，则在用户点击“自定义范围”之前不会显示选择自定义日期范围的日历。当此选项设置为 true 时，将显示选择自定义日期范围的日历。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->alwaysShowCalendar()

时间选择器

添加选择框以选择时间，除了日期。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->timePicker()

显示时间选择器秒

在时间选择器中显示秒。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->timePickerSecond()

时间选择器24小时格式

使用24小时而不是12小时的时间，去除AM/PM选择。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->timePicker24()

时间选择器增量选项

时间的分钟选择列表的增量（例如，30允许只选择以0或30结尾的时间）。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->timePickerIncrement(30)

自动应用

隐藏应用和取消按钮，并在点击两个日期后立即自动应用新的日期范围。

注意：不与 timePicker 选项一起使用。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->autoApply()

链接日历

启用时，显示的两个日历将始终是连续的两个月（例如，1月和2月），并且在点击日历上方的左右箭头时都会前进。当禁用时，两个日历可以单独前进并显示任何月份/年份。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->linkedCalendars()

单日历

仅显示单个日历以选择单个日期，而不是具有两个日历的范围选择器。 仅与 DateRangePicker 一起使用。

use Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangePicker::make('created_at')->singleCalendar()

禁用日期

指示该日期是否应该可供选择。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->disabledDates(['array of Dates'])

显示和选择器格式

指定日期显示和选择的格式。

DateRangeFilter::make('created_at')
//Picker Date Display Format in (Javascript Date Format)
->displayFormat('date format')
//Carbon Format reading from the Javascript displayFormat in (PHP Date Format)
->format('date format')

自定义查询

应用自定义过滤器查询。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use Illuminate\Database\Eloquent\Builder;
use Carbon\Carbon;

DateRangeFilter::make('created_at')
    ->modifyQueryUsing(fn(Builder $query, ?Carbon $startDate , ?Carbon $endDate , $dateString) =>
        $query->when(!empty($dateString),
            fn (Builder $query, $date) : Builder =>
                $query->whereBetween('created_at', [$startDate->subDays(3),$endDate]))
    )

过滤器指示器

在过滤器处于活动状态时显示指示器。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->withIndicator()

预定义范围

自定义预定义日期范围以便快速选择。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')
->ranges(['Last 3 days' => [now()->subDays(3), now()]])

使用范围标签

通过使用 useRangeLabels 函数，它允许字段显示预定义范围标签而不是实际日期范围。这可以简化显示并使其更用户友好。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->useRangeLabels()

禁用自定义范围选择

如果您希望用户只能从预定义的范围中选择，并防止他们选择自定义范围，可以使用 disableCustomRange 选项。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->disableCustomRange()

分隔符

指定日期范围的分隔符。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->separator(' - ')

下拉位置

指定筛选菜单应该下拉到的位置。

选项

DropDirection::DOWN : 选择器将在字段下方显示。（默认）

DropDirection::AUTO : 自动决定位置。

DropDirection::UP : 选择器将在字段上方显示。

示例

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use Malzariey\FilamentDaterangepickerFilter\Enums\DropDirection;

DateRangeFilter::make('created_at')->drops(DropDirection::AUTO)

打开位置

指定筛选菜单应该打开到的位置。

选项

OpenDirection::LEFT : 选择器将在字段左侧显示。（默认）

OpenDirection::RIGHT : 选择器将在字段右侧显示。

OpenDirection::CENTER : 选择器将在字段中心显示。

示例

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use Malzariey\FilamentDaterangepickerFilter\Enums\OpenDirection;

DateRangeFilter::make('created_at')->opens(OpenDirection::LEFT)

清除日期范围选择器

如果您已选择日期范围并希望将其删除，只需在字段内单击日历图标即可。

要禁用此行为，可以使用 disableClear() 方法。这将防止用户清除所选日期范围。

要自定义图标，可以使用 icon() 方法。它接受一个字符串或闭包。

use \Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use \Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangeFilter::make('created_at')->disableClear()
DateRangePicker::make('created_at')->disableClear()

DateRangeFilter::make('created_at')->icon('heroicons-backspace')
DateRangePicker::make('created_at')->icon('heroicons-backspace')

禁用预定义范围

如果您希望禁用预定义范围功能，并仅向用户提供自定义选择，可以使用 disableRanges() 方法。这将从选择器中删除任何预设的日期范围。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->disableRanges()

最大跨度

所选开始日期和结束日期之间的最大跨度。

use Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;

DateRangeFilter::make('created_at')->maxSpan(['months' => 1]), // days, months or years

显示周数

在日历的每周开始处显示本地化或 ISO 周数。

use \Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use \Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangeFilter::make('created_at')->showWeekNumbers() // Localized
DateRangePicker::make('created_at')->showISOWeekNumbers()

显示月份和年份下拉菜单

在日历上方显示月份和年份选择框，以便跳转到特定的月份和年份。您还可以自定义下拉菜单中显示的最小和最大年份。

use \Malzariey\FilamentDaterangepickerFilter\Filters\DateRangeFilter;
use \Malzariey\FilamentDaterangepickerFilter\Fields\DateRangePicker;

DateRangeFilter::make('created_at')->showDropdowns()->minYear(2000)->maxYear(2030)
DateRangePicker::make('created_at')->showDropdowns()->minYear(2000)->maxYear(2030)

屏幕截图

浅色模式

深色模式

样式

如果您正在构建自定义 Filament 主题，则需要额外一步才能使日历主题与您的自定义主题匹配。

将此行添加到您的 resources/css/{panel_name}/theme.css 文件中。

@import '/vendor/malzariey/filament-daterangepicker-filter/resources/css/filament-daterangepicker.css';

致谢

许可协议

MIT 许可协议（MIT）。有关更多信息，请参阅许可文件。

鸣谢

本项目使用了由 Dan Grossman 开发的出色的 Date Range Picker for Bootstrap。
特别感谢 JetBrains，他们对开源项目的支持对我们项目的进展和改进非常宝贵。通过他们的开源支持计划，JetBrains 慷慨地为我们提供了他们高质量的付费开发者工具的免费许可证，包括 IntelliJ IDEA 和 PhpStorm。这些工具大大提高了我们的生产率，并使维护高质量代码变得更加容易。JetBrains 对开源社区的贡献和对开源软件和协作的推广做出了重大贡献。我们衷心感谢 JetBrains 的支持和将我们纳入他们的开源项目支持计划。

malzariey / filament-daterangepicker-filter

维护者

详细信息