Inline Date Time Picker Laravel Package

Getting Started

This release (v2.1.0) is mainly a compatibility release: it adds Filament 5 support on top of the existing 2.x line. If you're on Filament 3/4, nothing about your day-to-day usage changes; if you're moving a panel to Filament 5, this is the version that unblocks you.

1. Install via Composer and let the constraint resolve against your panel's Filament major:

   composer require jacobtims/inline-date-time-picker:^2.1
   

2. Publish/refresh front-end assets if your app requires it (php artisan filament:assets, or php artisan filament:upgrade on older panels). Most Filament plugin issues at first install are stale asset manifests, not PHP.
3. Look first at the package's src/ for the field class and its resources/ directory for the Blade view/JS — that tells you which state format the component emits (a string vs. a Carbon-serialised value) faster than any docs.
4. First use case: drop it into a Resource form in place of the stock DateTimePicker when you want the calendar rendered inline (always visible) rather than behind a popover — e.g. a scheduling screen or a dashboard widget form where the date is the primary interaction.

use Jacobtims\InlineDateTimePicker\InlineDateTimePicker;

public static function form(Form $form): Form
{
    return $form->schema([
        InlineDateTimePicker::make('starts_at')
            ->label('Starts at')
            ->seconds(false)
            ->required(),
    ]);
}

Implementation Patterns

Drop-in replacement, not a new concept. Treat it as a configured DateTimePicker: the same ->required(), ->minDate(), ->disabled() and validation chain generally applies. Migrate one field first, confirm the state round-trips through save/edit, then swap the rest.

Resource forms and relation managers. The highest-value placement is on Create/Edit pages where an inline calendar removes a click from the flow. Also works well inside relation manager forms and action modals, though modals with fixed heights are where a permanently-expanded calendar is most likely to fight your layout.

Table filters and widgets. Because the picker is inline, it suits a filter panel or a custom dashboard widget form better than a dense table header filter — reserve ->live() usage for cases where the re-render cost is acceptable.

Pair with reactive fields. Use the field as the driver for dependent fields (e.g. selecting a date loads that day's available slots) with ->live() plus ->afterStateUpdated(). Keep the dependent lookup cheap; an inline picker tends to fire more state updates than a popover picker because there's no explicit "confirm" gesture.

Persist predictably. Cast the column ('starts_at' => 'datetime') and decide up front whether you store the user's wall-clock time or UTC. Let the field emit one canonical format and normalise in the model or a form ->format()/mutateFormDataBeforeSave() hook rather than sprinkling conversions at call sites.

Upgrade path for Filament 5. Bump Filament and this package together in the same PR, run your form/table test suite, and visually check the picker in both light and dark mode — Filament major bumps routinely change design tokens and Tailwind classes that plugin views depend on.

Gotchas and Tips

• Version constraints are the whole story here. The meaningful change in v2.1.0 is the Filament 5 constraint widening. Pin ^2.1 if you're on Filament 5; if you're still on Filament 3, confirm the package still declares support for your major rather than assuming backwards compatibility from the changelog alone.
• The Dependabot entries are noise. The two tar bumps (7.4.3 → 7.5.6 → 7.5.7) are build/tooling dependencies, not runtime PHP code. They carry no behavioural or security implications for your application.
• No deprecations or breaking changes are documented between v2.0.1 and v2.1.0, so this should be a safe minor bump — but "safe" here means "no API removed", not "no visual change under Filament 5".
• Timezone drift is the classic failure. The picker renders in the browser's locale; Eloquent stores in the app timezone. If a saved time looks shifted by hours, check config('app.timezone'), the panel's user timezone, and any ->timezone() call before touching the package.
• State format mismatch. If validation passes but the model receives null or a mangled string, log $state in ->afterStateHydrated() and ->afterStateUpdated(). Format/cast disagreements between the field and the column are far more common than component bugs.
• Asset caching. After upgrading, a picker that renders but doesn't respond is almost always stale compiled assets or a browser cache. Re-run the asset publish command and hard-refresh before debugging JavaScript.
• Testing. Livewire::test() with assertFormSet()/assertSet() on the field's state path will catch most regressions from a Filament major upgrade without needing browser tests; add one assertion for the saved value on create and one on edit hydration.
• Layout extension point. If the inline calendar overflows a narrow column or modal, prefer wrapping the field in a Grid/Section with explicit columnSpan('full') over forking the Blade view — the view is the part most likely to change between Filament majors.