DOCS
DOCS

Languages

Version

Theme

表单构造器 - 字段

Date-time picker

概述

日期时间选择器提供了日期/时间选择的交互接口。

use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\DateTimePicker;
use Filament\Forms\Components\TimePicker;
 
DateTimePicker::make('published_at')
DatePicker::make('date_of_birth')
TimePicker::make('alarm_at')
Date time pickers

自定义存储格式

使用 format() 方法，你可以自定义存入数据库时的字段格式。它接收一个字符串日期格式，使用 PHP 日期格式化 token：

use Filament\Forms\Components\DatePicker;
 
DatePicker::make('date_of_birth')
    ->format('d/m/Y')

禁用秒输入

使用 seconds(false) 方法，你可以在时间选择器中禁用秒输入：

use Filament\Forms\Components\DateTimePicker;
 
DateTimePicker::make('published_at')
    ->seconds(false)
Date time picker without seconds

时区

如果你希望用户在他们自己的时区中管理日期，你可以使用 timezone() 方法：

use Filament\Forms\Components\DateTimePicker;
 
DateTimePicker::make('published_at')
    ->timezone('America/New_York')

虽然日期仍然使用应用配置的时区进行存储，不过日期仍然可以在新的时区中加载，并且会在表单中保存时会转换回来。

启用 JavaScript 日期选择器

默认情况下，Filament 使用本机 HTML5 时间选择器。使用 native(false) 方法，你可以启用更可自定义的 JavaScript 日期选择器。

use Filament\Forms\Components\DatePicker;
 
DatePicker::make('date_of_birth')
    ->native(false)
JavaScript-based date time picker

请注意，虽然 JavaScript 日期选择器是可访问的，但它不支持像本机日期选择器那样的全键盘输入。如果需要全键盘输入，则应使用本机日期选择器。

自定义显示格式

你可以自定义该字段的显示格式，使之不同于其存入到数据库的格式。为此，请使用 displayFormat() 方法，该方法接收一个字符串日期格式：

use Filament\Forms\Components\DatePicker;
 
DatePicker::make('date_of_birth')
    ->native(false)
    ->displayFormat('d/m/Y')
Date time picker with custom display format

如果希望使用与应用配置不同的区域(locale)设置，你也可以配置渲染显示时使用的区域设置。为此，可以使用 locale() 方法：

use Filament\Forms\Components\DatePicker;
 
DatePicker::make('date_of_birth')
    ->native(false)
    ->displayFormat('d F Y')
    ->locale('fr')

配置时间输入间隔

使用 hoursStep()、minutesStep() 或者 secondsStep() 方法，你可以自定义小时、分钟、秒的增减的输入间隔：

use Filament\Forms\Components\DateTimePicker;
 
DateTimePicker::make('published_at')
    ->native(false)
    ->hoursStep(2)
    ->minutesStep(15)
    ->secondsStep(10)

一周的第一天

在某些国家，一周的第一天不是周一。要在日期选择器中自定义一周的第一天，请在组件中使用 firstDayOfWeek() 方法，可接收的参数值从 0 到 7，周一是 1，周日为 7 或 0：

use Filament\Forms\Components\DateTimePicker;
 
DateTimePicker::make('published_at')
    ->native(false)
    ->firstDayOfWeek(7)
Date time picker where the week starts on Sunday

还有一些更方便的助手方法可以更语义地设置一周的第一天：

use Filament\Forms\Components\DateTimePicker;
 
DateTimePicker::make('published_at')
    ->native(false)
    ->weekStartsOnMonday()
 
DateTimePicker::make('published_at')
    ->native(false)
    ->weekStartsOnSunday()

禁用指定日期

要防止指定日期被选中：

use Filament\Forms\Components\DateTimePicker;
 
DateTimePicker::make('date')
    ->native(false)
    ->disabledDates(['2000-01-03', '2000-01-15', '2000-01-20'])
Date time picker where dates are disabled

选中日期后关闭选择器

使用 closeOnDateSelection() 方法，可以在日期选中后关闭选择器：

use Filament\Forms\Components\DateTimePicker;
 
DateTimePicker::make('date')
    ->native(false)
    ->closeOnDateSelection()

使用 datalist 自动补全日期

除非你使用了 JavaScript 日期选择器，你可以使用 datalist() 方法，为日期选择器指定 datalist 选项：

use Filament\Forms\Components\TimePicker;
 
TimePicker::make('appointment_at')
    ->datalist([
        '09:00',
        '09:30',
        '10:00',
        '10:30',
        '11:00',
        '11:30',
        '12:00',
    ])

当用户使用选择器时，Datalist 会为用户提供自动补全选项。不过，这些选项是纯推荐，用户仍然可以输入任何的值。如果你希望使用一套预定义的选项对用户进行严格的限制，请查阅 Select 字段。

在该字段旁边添加前后缀

使用 prefix() 和 suffix() 方法，你可以在输入框前后放置文本：

use Filament\Forms\Components\DatePicker;
 
DatePicker::make('date')
    ->prefix('Starts')
    ->suffix('at midnight')
Date time picker with affixes

使用图标作为前后缀

使用 prefixIcon() 和 suffixIcon() 方法，你可以在输入框前后放置图标：

use Filament\Forms\Components\TimePicker;
 
TimePicker::make('at')
    ->prefixIcon('heroicon-m-play')
Date time picker with prefix icon

设置前后缀图标颜色

前后缀图标默认是灰色，不过你可以使用 prefixIconColor() 和 suffixIconColor() 方法将其设为不同颜色：

use Filament\Forms\Components\TimePicker;
 
TimePicker::make('at')
    ->prefixIcon('heroicon-m-check-circle')
    ->prefixIconColor('success')

使该字段只读

不要与禁用该字段混为一谈，你可以使用 readOnly() 方法使该字段只读：

use Filament\Forms\Components\DatePicker;
 
DatePicker::make('date_of_birth')
    ->readonly()

请注意，此设置仅在原生日期选择器上强制执行。如果你使用 JavaScript 日期选择器，则需要使用 disabled()。

与 disabled() 相比，它有一些不同之处：

  • 使用 readOnly() 时，该字段仍然会在表单提交时发送到服务器。它可以通过浏览器控制台或者 JavaScript 操作改变。你可以使用 dehydrated(false) 来阻止该行为。
  • 当使用 readOnly() 时，它的样式没有任何改变。
  • 当使用 readOnly() 时，该字段仍然是可聚焦的。

日期时间选择器验证

除了验证页面中的所有规则，还有一些专门用于日期时间选择器的规则。

最大日期/最小日期验证

你可以限制选择器所能够选择的最小和最大日期。minDate 和 maxDate 接收一个 DateTime 实例(比如 Carbon)或者字符串：

use Filament\Forms\Components\DatePicker;
 
DatePicker::make('date_of_birth')
    ->native(false)
    ->minDate(now()->subYears(150))
    ->maxDate(now())
Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

上一页
Radio
下一页
File upload