Laravel Filament 官方提供的表单日期组件不支持多选，只能选择单个日期。如果要实现日期多选的需求，可以通过自定义字段的方法，但这需要对 Filament 以及 Livewire 有较深入的了解。最简单的办法就是安装第三方的插件。本文就介绍一下安装第三方插件 Flatpickr 的方法。
Laravel Filament Flatpickr 网址：filamentphp.com/plugins/coo…
安装步骤
首先通过 Composer 安装：
composer require coolsam/flatpickr
接下来，运行 filament:assets 命令发布资源文件：
php artisan filament:assets
您可以选择使用以下命令发布软件包的配置文件（非必要）：
php artisan vendor:publish --tag="coolsam-flatpickr-config"
使用方法
use Coolsam\FilamentFlatpickr\Forms\Components\Flatpickr; // 默认是日期选择器 Flatpickr::make('test_field') // 最小配置 // 详细配置项 Flatpickr::make('test_field') ->allowInput() // 允许用户在文本框中手动输入日期（使文本框可编辑） ->altInput(true) // 启用 "替代输入"（请参阅 Flatpickr 文档） ->altFormat('F j, Y') // 自定义输入格式 ->enableTime() // 配置该选项转换为日期时间选择器 ->disabledDates(['2023-07-25','2023-07-26']) // Disable specific dates from being selected. ->minDate(today()->startOfYear()) // 设定最小可选日期 ->maxDate(today()) // 设置最大可选日期 ->minTime(now()->format('H:i:s')) // 设置最小可选时间 ->maxTime(now()->addHours(12)->format('H:i:s')) // 设置最大可选时间 ->hourIncrement(1) // 时间选择器中的时间隔 ->minuteIncrement(10) // 时间选择器中的分间隔 ->enableSeconds(false) // 在时间选择器中禁用秒数 ->defaultSeconds(0) //当未选择日期时，秒元素的初始值 ->defaultMinute(00) // 当未选择日期时，分元素的初始值 ->allowInvalidPreload() // 预检查所选日期是否有效 ->altInputClass('sample-class') // 为输入框添加自定义样式 ->animate() // 为日期选择器中的过渡效果设置动画。 ->dateFormat('Y-m-d') // 自定义日期格式 ->ariaDateFormat('Y-m-d') // Aria ->clickOpens(true) // 单击输入框时打开选择器 ->closeOnSelect(true) // 选择后自动关闭选择器 ->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) // 在输入框内显示日期选择器，而不是使用弹出窗口。 ->disableMobile(true) // 在移动设备上禁用移动版日期选择器。 ->theme(\Coolsam\FilamentFlatpickr\Enums\FlatpickrTheme::AIRBNB) // 设置日期选择器主题（适用于当前页面中的所有日期选择器）。为保证类型的合理性，请查看 FlatpickrTheme 枚举类，了解允许的主题列表。 ->mode(\Coolsam\FilamentFlatpickr\Enums\FlatpickrMode::RANGE) // 设置模式 ->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() // 日期时间选择器 Flatpickr::make('week')->weekSelect() // 周选择器 Flatpickr::make('report_month')->monthSelect() // 月选择器 Flatpickr::make('start_time')->time() // 时间选择器 Flatpickr::make('filter_range')->range() // 日期范围选择器 Flatpickr::make('list_of_dates')->multiple() // 日期多选选择器
汉化教程
Flatpickr 插件的缺点是不支持语言设置，我的项目只需要中文而且估计也不需要再更新该插件了。因此我直接修改了发布的资源文件。具体方法如下：
格式化 public/js/coolsam/flatpickr/components/flatpickr-component.js 文件，推荐使用零五网在线工具箱的 js 格式化工具：tools.02405.com/tool/js-for…
然后找到其中的语言配置项目，修改成中文即可。
weekdays: { shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], longhand: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] }, months: { shorthand: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], longhand: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] }, ...... rangeSeparator: " to ", weekAbbreviation: "Wk", scrollTitle: "Scroll to increment", toggleTitle: "Click to toggle",
示例：
weekdays: { shorthand: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], longhand: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] }, months: { shorthand: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], longhand: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"] }, rangeSeparator: " 至 ", weekAbbreviation: "周", scrollTitle: "滚动切换", toggleTitle: "点击切换 12/24 小时时制",
