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 CoolsamFilamentFlatpickrFormsComponentsFlatpickr;
 
// 默认是日期选择器
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(CoolsamFilamentFlatpickrEnumsFlatpickrTheme::AIRBNB) // 设置日期选择器主题（适用于当前页面中的所有日期选择器）。为保证类型的合理性，请查看 FlatpickrTheme 枚举类，了解允许的主题列表。
    ->mode(CoolsamFilamentFlatpickrEnumsFlatpickrMode::RANGE) // 设置模式
    ->monthSelectorType(CoolsamFilamentFlatpickrEnumsFlatpickrMonthSelectorType::DROPDOWN)
    ->shorthandCurrentMonth(true)
    ->nextArrow('>')
    ->prevArrow('<')
    ->noCalendar(true)
    ->position(CoolsamFilamentFlatpickrEnumsFlatpickrPosition::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.www.codesou.cn/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 小时时制",

最终效果：