公告: 旧版文档请移步 -> http://v2.laravel-filament.cn/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() 时,该字段仍然是可聚焦的。

日期时间选择器验证

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

最大日期/最小日期验证

你可以限制选择器所能够选择的最小和最大日期。minDatemaxDate 接收一个 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