- How do I install coolsam/flatpickr in a Laravel application?
- Install it with Composer using composer require coolsam/flatpickr, then optionally run php artisan vendor:publish to copy the config and front-end assets into your project. The service provider registers the Blade components and assets automatically, so no manual wiring is required. Pin an exact version in composer.json since the package has a single maintainer and a small release history.
- Which Laravel, PHP, and Filament versions does coolsam/flatpickr support?
- The package is built around Laravel 10 and 11 conventions and its Filament form field targets the Filament v3 era, with Livewire v3 and Alpine.js workflows in mind. Filament v4 and late v3 minor releases are not proven against it, so check the composer.json constraints in the vendor source rather than trusting the README. If a Filament major upgrade is on your roadmap, treat this dependency as a potential blocker and verify compatibility before adopting it.
- How do I render a date picker in a Blade view with coolsam/flatpickr?
- Use the provided Blade components for date, time, and datetime modes, passing the input name and any Flatpickr options you need. The components keep your form markup clean and emit the JavaScript initialization for you, so you avoid hand-written script blocks in every view. You can also call the helper functions directly if you prefer a more procedural style.
- Does coolsam/flatpickr work with Livewire and Alpine.js?
- Yes, it is designed to fit Livewire and Alpine.js workflows, and the initialized value binds as a normal Livewire property. Keep in mind that Flatpickr state arrives as a string, or an array of strings for range mode, rather than a Carbon instance, and empty input often arrives as an empty string instead of null. Normalize values in your Livewire component or a cast before validating or persisting them.
- How do I change the date format used by the Flatpickr input?
- Pass the dateFormat option through the component or config, and use altFormat plus altInput if you want a friendly display format behind the scenes. Be careful: Flatpickr format tokens are not Carbon tokens, so S versus s, h and K versus A and a all mean different things. Store one shared constants class for your formats so the whole team uses the same tokens instead of inventing them per field.
- Does coolsam/flatpickr handle timezones and daylight saving time?
- No. The picker emits a naive local date or time string and explicitly leaves timezone and DST correctness out of scope. If timezone-correct scheduling is a real requirement, treat this package as a presentation detail inside a larger design that converts and stores values in UTC yourself. Do not position it as a solution to timezone handling.
- How do I customize Flatpickr themes, locales, and assets?
- Run vendor:publish to copy the package config and assets, then point the config at your preferred theme and locale files. Flatpickr is dependency-free and lightweight, so swapping CSS themes or adding a locale script is a matter of including the right asset. If you build assets yourself, confirm whether the package ships precompiled JavaScript or expects a build step in your pipeline.
- Why is my coolsam/flatpickr input rendering as a plain text field?
- The picker degrades silently to a plain text input when its JavaScript or CSS assets fail to load, usually because assets were never published or a Content Security Policy is blocking them. There is no error surfaced in that case, so check the browser console, your CSP headers, and your asset pipeline first. Verify the component works on a scratch page before rolling it into a real form.
- Is coolsam/flatpickr safe to use in production?
- The code footprint is small, a thin service provider plus Blade components plus a Filament field, so the integration is easy to audit and easy to remove. The real risk is provenance: one maintainer, low adoption, and documentation that lags the source, plus behavioral quirks around format tokens, empty-string values, and dynamically added repeater rows. Pin the version, wrap the component in an internal subclass you own, and write down your fallback to a native input before adoption rather than after.
- What are the alternatives to coolsam/flatpickr?
- You can use Flatpickr directly with a small Blade partial and a few lines of JavaScript, use Alpine.js date components, or fall back to the native HTML date and time inputs. A hand-rolled partial costs roughly half a day to two days per field variant plus ongoing browser testing, so the package wins on cost if you accept the maintenance risk. The native input is the cheapest and most accessible option when you only need basic date entry.