Filament Date Time Slots Laravel Package

Getting Started

The v1.1.0 release is a layout/responsiveness release, not an API release. Existing forms keep working — the default layout simply became horizontal and now auto-adapts to its container.

Minimal steps:

1. composer update the package (no config or migration changes are required per the upgrade notes).
2. Re-publish / rebuild front-end assets. The release rebuilt the distributable CSS and JS; if you cache or publish package assets (typical for Filament plugins), run the asset publish step (e.g. php artisan filament:assets) and clear caches (php artisan view:clear, php artisan optimize:clear). Skipping this is the most likely reason "nothing changed" after upgrading.
3. Use the field as before:

DateTimeSlotPicker::make('due_at')
    ->label('Appointment')
    ->required();

4. Look first at: the README (layout section), the CHANGELOG, and the field class itself for the new vertical() method — the exact FQCN/import and available chainable methods should be confirmed there rather than assumed.

First real use case: a booking/appointment field in a Filament resource form. Try it once at full column width (horizontal) and once inside a narrow grid column or on a phone-sized viewport (auto-vertical) so you see both layouts immediately.

Implementation Patterns

Let the default do the work. Horizontal-by-default with automatic vertical fallback covers most forms. Only reach for an explicit mode when the layout is semantically fixed.

Force vertical for constrained contexts — sidebars, modals, relation managers, dashboard widgets, infolist-style narrow columns:

DateTimeSlotPicker::make('due_at')
    ->vertical();

Control layout with column span, not the method. Because the switch is container-based, the way to guarantee horizontal is to give the field room:

DateTimeSlotPicker::make('due_at')
    ->columnSpanFull();   // stays horizontal even in a 3-column grid

Conversely, ->columnSpan(1) inside a multi-column grid will flip to vertical on narrower screens — usually the desired behaviour, but be deliberate about it.

Long slot lists. With independent scrolling plus a bounded minimum height for vertical/mobile lists, the field now behaves predictably with dozens of slots. Pair it with a Section or fixed columnSpan when the field sits next to tall siblings so the two don't fight for vertical space.

Reactive forms. Standard Filament chaining applies — use ->live() when another field depends on the chosen slot (e.g. showing duration or price), and keep validation on the field (->required(), ->rules([...])) rather than in the Blade layer. The picker returns a single value; store it in a datetime cast or string column depending on whether the date and slot are combined.

Day-to-day workflow. Build the form at desktop width, then collapse the Filament sidebar / resize to a single-column grid to verify the mobile path. Window resizing alone can be misleading — container queries respond to the field's width, not the viewport.

Gotchas and Tips

• Stale assets are the #1 upgrade trap. The layout changes live in the compiled CSS/JS. If the new behaviour is missing after upgrading, clear caches and re-publish assets before debugging anything else.
• Container queries, not media queries. A wide monitor with a narrow grid column will still render vertically. Developers expecting md:-style viewport breakpoints will report this as a bug. Fix by widening the container (columnSpanFull()), not by resizing.
• Custom Filament themes. If you have a custom theme that imports the package's CSS, it must be rebuilt — otherwise you keep the old stylesheet while the PHP side reports v1.1.0.
• vertical() looks one-way. Nothing in the release notes indicates a horizontal() counterpart, so treat the default/inherited behaviour as horizontal and use container width to get it back. Verify in the source before promising a runtime toggle.
• Test coverage is thin for a UI release. 6 tests / 21 assertions cover the PHP surface; the actual responsive behaviour, auto-switch threshold, and scrolling are not exercised by PHPUnit and no browser tests are mentioned. Budget for manual visual QA across widths, and re-check after any future asset rebuild.
• Nested scroll traps. Independent slot scrolling inside an already-scrollable modal or mobile page can capture wheel/touch gestures. The bounded minimum height helps, but test on a real phone, especially with many slots.
• Fixed slot height + long text. Translated labels or locale-specific time formats may clip in the now-consistent button height. Check your non-English locales.
• No API changes ≠ no visual changes. Upgrade should be drop-in, but every existing form using the picker will look different at narrow widths. Spot-check production forms rather than assuming identical rendering.
• Extension point: prefer overriding via your Filament theme or published views over editing vendor assets, so the next asset rebuild doesn't silently discard your tweaks.