Laravel Filament 官方提供的表单日期组件不支持多选，只能选择单个日期。如果要实现日期多选的需求，可以通过自定义字段的方法，但这需要对 Filament 以及 Livewire 有较深入的了解。最简单的办法就是安装第三方的插件。本文就介绍一下安装第三方插件 Flatpickr 的方法。
Laravel Filament Flatpickr 网址：https://filamentphp.com/plugins/coolsam-flatpickr
安装步骤
首先通过 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 格式化工具：https://tools.02405.com/tool/js-formatter
然后找到其中的语言配置项目，修改成中文即可。
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 小时时制",最终效果：
