> ## Documentation Index > Fetch the complete documentation index at: https://flex-fields.bjanczak.com/llms.txt > Use this file to discover all available pages before exploring further. > ## Agent Instructions > Examples target Filament 5. Verify optional dependencies before configuring integrations. > Upload transfer completion, permanent storage and record acceptance are separate milestones. Native and Spatie image conversions retain the original. # Date picker > Configure single dates, date/time appointments, guided entry and unavailable days. Use `FlexDatePicker` to select a day, `FlexDateTimePicker` when the choice includes time, and `FlexDateField` for guided entry without a calendar. ## Basic date ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDatePicker; FlexDatePicker::make('date') ->label('Appointment date') ->default('2026-10-15') ->required(); ``` The default display is `Oct 15, 2026`; storage is `2026-10-15`. Clicking the input opens the calendar. The trailing chevron is decorative. Picking a day closes the ordinary date picker by default. ## Guided entry ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDatePicker::make('date') ->editable() ->displayFormat('d/m/Y'); ``` Each date part is a separate numeric segment. Typing replaces the selected segment; completing it advances to the next. Letters cannot become date values. Month/year changes keep the day valid, including leap years. A partial date remains incomplete rather than silently retaining the previous selection. ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDateField; FlexDateField::make('birthday') ->label('Birthday') ->displayFormat('d/m/Y') ->required(); ``` `FlexDateField` has guided entry enabled and no calendar. ArrowUp/ArrowDown change a segment; Home/End select its minimum/maximum; Delete clears it. ArrowLeft/ArrowRight move between parts. F4 or Alt+ArrowDown opens an available calendar. ## Readonly, disabled and clearing ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDatePicker::make('date')->editable(false); FlexDatePicker::make('date')->clearable(false); FlexDatePicker::make('date')->readOnly(); FlexDatePicker::make('date')->disabled(); ``` `editable(false)` prevents manual entry but keeps calendar selection available. `readOnly()` prevents changes. `disabled()` disables the field; use Filament's persistence settings if you need a disabled value submitted. Date and date/time pickers are clearable by default; their calendar includes Clear. ## Earliest and latest date ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDatePicker::make('delivery_date') ->minDate('2026-10-01') ->maxDate('2026-10-31'); ``` Bounds are inclusive. `minValue()` and `maxValue()` are equivalent aliases. A Carbon date or closure can provide a dynamic bound. ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} use Carbon\Carbon; FlexDatePicker::make('delivery_date') ->minDate(fn () => Carbon::today()) ->maxDate(fn () => Carbon::today()->addMonths(3)); ``` ## Block weekdays and individual days ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDatePicker::make('appointment') ->disabledWeekdays([0, 6]) ->disabledDates(['2026-12-24', '2026-12-25']); ``` Weekdays are `0` Sunday through `6` Saturday. Blackout dates use `Y-m-d`, also when a date/time picker stores a time. Duplicate dates are removed; use a callback instead of shipping more than 10,000 blackout dates. ## Custom availability ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} use Carbon\Carbon; FlexDatePicker::make('appointment') ->isDateUnavailable(fn (Carbon $date): bool => $date->isWeekend()); ``` Return `true` for an unavailable date. The calendar checks the visible date window and shows loading/retry feedback if that request fails. Submission checks the selected date again. The callback is not a reservation lock: booking applications must check capacity again when saving. ## Always-visible calendar ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDatePicker::make('date') ->inline() ->fixedWeeks(false) ->outsideDays(false); ``` `inline()` keeps the calendar visible. `fixedWeeks(false)` permits four, five or six week rows; the default is six. `outsideDays(false)` hides dates from adjacent months in the single-date calendar. `highlightToday(false)` removes today's marker. ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDatePicker::make('date') ->closeOnSelect(false) ->showCalendarButton(false) ->highlightToday(false); ``` The calendar can stay open after selection. Hiding the chevron does not remove calendar selection from the input. ## Language, week order and formats ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDatePicker::make('date') ->locale('pl') ->displayFormat('d F Y') ->weekStartsOn(1); ``` `locale()` translates month/day names and determines text direction and the default first weekday. It does not automatically replace an explicitly chosen format or the default English-style token order. Set `displayFormat()` for the order you want. `weekStartsOn(0)` starts with Sunday; `1` starts with Monday. `firstDayOfWeek()` is the equivalent API. ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDatePicker::make('date')->locale('ar')->displayFormat('d/m/Y'); FlexDatePicker::make('date')->locale('en')->displayFormat('Y-m-d'); FlexDatePicker::make('date')->locale('fr')->displayFormat('j F Y'); ``` The calendar supports RTL navigation and layout. See the [configuration reference](https://flex-fields.bjanczak.com/docs/date-time-configuration.md#calendar-systems) for alternate calendar systems and storage semantics. ## Date and time ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDateTimePicker; FlexDateTimePicker::make('starts_at') ->label('Starts at') ->hourCycle(24) ->minuteStep(15) ->timeZone('Europe/Warsaw') ->default('2026-10-15T14:30:00'); ``` The date/time picker stays open while choosing a date and a clock value. The timezone is a label and determines Today; the saved value is a local date/time without an offset. ```php 12-hour display theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDateTimePicker::make('starts_at')->hourCycle(12); ``` ```php 24-hour display theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDateTimePicker::make('starts_at')->hourCycle(24)->hideTimeZone(); ``` ```php Seconds theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDateTimePicker::make('starts_at')->showSeconds()->secondStep(5); ``` `showSeconds()` enables second precision in date/time storage and display when time is enabled. For hour-only selection, use `granularity('hour')`; for seconds, use `granularity('second')`. `granularity('day')` removes time entirely. ## Appointment slots ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDateTimePicker::make('appointment') ->hourCycle(24) ->allowedTimes(['09:15', '11:40', '15:10']) ->defaultTime('09:15') ->disabledWeekdays([0, 6]); ``` Only the specified hours pass validation. Use `allowedTimes([])` for no available hours, or `allowedTimes(null)` to return to the interval list. An explicitly configured default time must be in the allowed list. ## Date/time bounds ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDateTimePicker::make('appointment') ->minValue('2026-10-15T09:00:00') ->maxValue('2026-10-20T17:00:00') ->minuteStep(30); ``` On the first/last date, only times within the corresponding bound are offered. To restrict opening hours on every day, use `allowedTimes()` as well; these two bounds describe a continuous period, not recurring business hours. ## Keep time hidden ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDateTimePicker::make('starts_at') ->defaultTime('09:00') ->hideTimeSection(); ``` This hides calendar clock controls while retaining time in the stored value. It does not convert the field to date-only; use `granularity('day')` for that. ## Custom saved format ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDatePicker::make('date') ->displayFormat('d/m/Y') ->storageFormat('d.m.Y'); ``` Use the same format when restoring saved values. Prefer `Y-m-d` for interoperable date storage and keep dates in the year range 1–9999. ## Saving to DATE and DATETIME columns The displayed date is separate from the saved value. A date uses `Y-m-d`; date/time uses a local ISO date/time such as `2026-06-15T14:30:00` by default. For a Filament resource using Eloquent, define matching model casts: ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} protected function casts(): array { return [ 'starts_on' => 'date', 'starts_at' => 'datetime', ]; } ``` ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDatePicker::make('starts_on') ->label('Start date'); FlexDateTimePicker::make('starts_at') ->label('Start date and time'); ``` Eloquent converts the value to its database date format when saving and returns a Carbon instance when reading. Both pickers accept that instance when restoring the form. Use nullable database columns for optional fields. For direct Query Builder writes, or when you need an explicit SQL date/time string, configure the saved format: ```php theme={"theme":{"light":"github-light","dark":"github-dark"}} FlexDateTimePicker::make('starts_at') ->storageFormat('Y-m-d H:i:s'); ``` Date/time values represent local wall time. The picker does not infer the user's timezone or silently convert it to UTC. Apply the application's timezone policy before persistence when storing an instant. A range is an array of `start` and `end`: use a JSON attribute or explicitly map its endpoints to separate date columns. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.