README

在 Filament 表单和面板中使用 Flatpickr 作为日期选择器。

重要

需要帮助
由于我现在无法投入足够的时间，我需要帮助维护此项目。如果您愿意并能够协助维护此软件包，请与我联系。

注意：这些文档是为 v3.x 版本准备的，它仅支持 Filament 3.x。对于 Filament v2 用户，请使用此指南。

安装

通过 composer 安装此软件包

composer require coolsam/flatpickr

接下来，运行 filament:assets 命令以确保发布软件包的资产

php artisan filament:assets

您可以选择使用以下命令发布软件包的配置文件

php artisan vendor:publish --tag="coolsam-flatpickr-config"

用法

您只需使用一个组件：Flatpickr。您可以使用此软件包中的 Flatpickr 组件作为

• 日期选择器
• 时间选择器
• 日期时间选择器
• 范围选择器
• 周选择器
• 多日期选择器
• 月份选择器

大多数流畅的配置方法与 Flatpickr 的官方 选项在命名上相似。其余的配置与正常的 Filament TextInput 类似。

以下是方法的一些示例。有关每个配置的详细信息，请参阅 Flatpickr 的官方文档。

use Coolsam\FilamentFlatpickr\Forms\Components\Flatpickr;

// Basic, Date Field
Flatpickr::make('test_field') // Minimal Config as a datepicker
Flatpickr::make('test_field')
    ->allowInput() // Allow a user to manually input the date in the textbox (make the textbox editable)
    ->altInput(true) // Enable the use of Alternative Input (See Flatpickr docs)
    ->altFormat('F j, Y') // Alternative input format
    ->enableTime() // Turn this into a DateTimePicker
    ->disabledDates(['2023-07-25','2023-07-26']) // Disable specific dates from being selected.
    ->minDate(today()->startOfYear()) // Set the minimum allowed date
    ->maxDate(today()) // Set the maximum allowed date.
    ->minTime(now()->format('H:i:s')) // Set the minimum allowed time
    ->maxTime(now()->addHours(12)->format('H:i:s')) // Set the maximum allowed time
    ->hourIncrement(1) // Intervals of incrementing hours in a time picker
    ->minuteIncrement(10) // Intervals of minute increment in a time picker
    ->enableSeconds(false) // Enable seconds in a time picker
    ->defaultSeconds(0) //Initial value of the seconds element, when no date is selected 
    ->defaultMinute(00) // Initial value of the minutes element, when no date is selected
    ->allowInvalidPreload() // Initially check if the selected date is valid
    ->altInputClass('sample-class') // Add a css class for the alt input format
    ->animate() // Animate transitions in the datepicker.
    ->dateFormat('Y-m-d') // Set the main date format
    ->ariaDateFormat('Y-m-d') // Aria
    ->clickOpens(true) // Open the datepicker when the input is clicked.
    ->closeOnSelect(true) // Close the datepicker once the date is selected.
    ->conjunction(',') // Applicable only for the MultiDatePicker: Separate inputs using this conjunction. The package will use this conjunction to explode the inputs to an array.
    ->inline(true) // Display the datepicker inline with the input, instead of using a popover.
    ->disableMobile(true) // Disable mobile-version of the datepicker on mobile devices.
    ->theme(\Coolsam\FilamentFlatpickr\Enums\FlatpickrTheme::AIRBNB) // Set the datepicker theme (applies for all the date-pickers in the current page). For type sanity, Checkout the FlatpickrTheme enum class for a list of allowed themes.
    ->mode(\Coolsam\FilamentFlatpickr\Enums\FlatpickrMode::RANGE) // Set the mode as single, range or multiple. Alternatively, you can just use ->range() or ->multiple()
    ->monthSelectorType(\Coolsam\FilamentFlatpickr\Enums\FlatpickrMonthSelectorType::DROPDOWN)
    ->shorthandCurrentMonth(true)
    ->nextArrow('>')
    ->prevArrow('<')
    ->noCalendar(true)
    ->position(\Coolsam\FilamentFlatpickr\Enums\FlatpickrPosition::AUTO_CENTER)
    ->showMonths(1)
    ->weekNumbers(true)
    ->use24hr(true)
    ->wrap(true)
;
Flatpickr::make('published_at')->enableTime() // Use as a DateTimePicker
Flatpickr::make('week')->weekSelect() // Use as a Week Picker
Flatpickr::make('report_month')->monthSelect() // Use as a Month Picker
Flatpickr::make('start_time')->time() // Use as a TimePicker
Flatpickr::make('filter_range')->range() // Use as a Date Range Picker
Flatpickr::make('list_of_dates')->multiple() // Use as a Multiple Date Picker

测试

composer test

变更日志

请参阅 变更日志 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全漏洞

请查看我们的安全策略 了解如何报告安全漏洞。

致谢

• Savannabits
• 所有贡献者

许可证

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