Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesInstall Wirepicker with Composer, load its CSS and JavaScript using either published assets or your Vite bundle, then bind the Blade component to a Livewire property. Use a Y-m-d string for one date or an associative start/end array for a date range. First check the package’s PHP and Illuminate requirements against your app’s locked dependencies.
Check compatibility before installing
Packagist’s surfaced Wirepicker v1.1.0 record, published October 2, 2026, lists PHP >=8.2 and illuminate/support and illuminate/view >=11.0. Livewire is listed as a suggested dependency. These Illuminate minimums are not a complete Laravel support matrix, so check the package metadata and your project’s locked PHP and Illuminate versions before adding it. See Wirepicker on Packagist.
As an Amazon Associate I earn from qualifying purchases.
Wirepicker’s requirements are distinct from Livewire’s. The Livewire 4 installation documentation lists Laravel 10+ and PHP 8.1+ as Livewire requirements; use the documentation branch matching your installed version. Livewire 4 installation · Livewire 3 installation.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Install the package and load its assets
From the Laravel project directory, install the Composer package and publish its asset files:
#1 Best Overall
composer require edulazaro/wirepicker
php artisan vendor:publish --tag=wirepicker-assetsFor the published-file route, add the stylesheet and deferred script to the layout used by the page containing the picker:
<link rel="stylesheet" href="{{ asset('vendor/wirepicker/css/wirepicker.css') }}">
<script src="{{ asset('vendor/wirepicker/js/wirepicker.js') }}" defer></script>If the application already bundles frontend assets with Vite, the package also documents importing its files from the vendor directory instead:
/* CSS entry file */
@import "../../vendor/edulazaro/wirepicker/resources/css/wirepicker.css";// JavaScript entry file
import '../../vendor/edulazaro/wirepicker/resources/js/wirepicker.js';These are alternative asset paths: use the one that fits the application’s existing asset pipeline rather than loading both. Wirepicker is described as having no runtime dependencies and can be used with or without Livewire or Alpine. Livewire 4 automatically injects its own assets, with @livewireStyles and @livewireScripts available when you need explicit placement control; avoid loading Alpine twice if the application already includes it. For Livewire 3, follow its versioned instructions rather than copying older asset configuration into a v4 app. Wirepicker package documentation · Livewire 4 installation · Livewire 3 installation.
Recommended Free Tools
Add a single-date picker
Place the component in a Livewire view and bind it to a component property:
Rank #3
<x-wirepicker wire:model="startsOn" />The bound value is a Y-m-d string, or an empty string when no date is selected. In the Livewire component, initialize the property accordingly:
public string $startsOn = '';Wirepicker documents support for standard wire:model modifiers, including .live and .blur. Choose a modifier based on when the rest of the form needs to receive updates. Package README.
Bind a date range using the documented array shape
For two dates, add the range prop and bind the component to an associative array with start and end keys:
Free tools Windows power users keep installed
One-click scans. No signup required.
<x-wirepicker range wire:model.live="period" />public array $period = ['start' => '', 'end' => ''];The first calendar selection sets the start and the second sets the end; the package documentation says dates can be chosen in either order. If you provide presets, the documented form is:
<x-wirepicker range wire:model.live="period" :presets="['this-month', 'next-month', 'this-year']" />Other documented preset keys are today, this-week, next-7-days and last-month. Unknown preset names are ignored. In a plain HTML form rather than a Livewire binding, the range field names are period[start] and period[end]. Package README.
Configure bounds, labels and appearance
The component documents these options:
range: enables date-range selection; defaults to false.presets: shortcut keys for common date choices; defaults to an empty list.placeholder,name,valueandid: field text, ordinary form attributes and initial value.minandmax: date bounds inY-m-dformat.clearable: whether the selection can be cleared; defaults to true.size:mdorsm, with the smaller size intended for toolbars.localeandweek-start: locale and first weekday; the latter uses 0 for Sunday through 6 for Saturday.
Month and weekday names, displayed date formatting, and the calendar’s first day of the week use the browser’s Intl support. Wirepicker’s own short interface labels ship in English and Spanish. To add or alter those labels, publish the language files with:
php artisan vendor:publish --tag=wirepicker-langThe README says the app locale is the default. Package README.
Choose a theme and dark-mode behavior
Set data-wire-theme on the document’s <html> element or on a containing element. Documented themes are default, soft, glass, gradient, neon, minimal, claude, chatgpt, studio, synthwave, megaflow and brutalist. Dark mode can follow the system, a .dark class, or data-wire-theme-mode="dark". For finer adjustments, the package lists CSS variables including --wp-accent, --wp-range, --wp-hover, trigger and calendar colors, sizing, radius, day size and z-index. Inspect the chosen theme in your own layout to confirm it fits surrounding styles. Package README.
Check interaction and diagnose common integration issues
Wirepicker documents arrow keys for moving by day or week, Page Up and Page Down for changing months, Enter to select, and Escape to close the calendar and return focus to the field. Each change emits a bubbling wirepicker:change event. Its detail contains value and, for a range, start and end. The JavaScript API also documents Wirepicker.refresh() to repaint after external field changes and Wirepicker.close() to close the calendar. These are documented behaviors; verify the flow you need in your app. Package README.
Quick Recap
- The component renders but has no styling or interaction: confirm the stylesheet and script are included through one of the documented asset routes and that the resulting URLs load in the browser.
- Livewire does not receive the expected value: check the property shape—one
Y-m-dstring for a single date, or an array withstartandendfor a range—and confirm the binding name matches the property. - A picker is clipped by a card, table or modal: the author’s release article says the popover is drawn on
bodyto avoid clipping by surrounding containers. If layout problems remain, inspect the app’s own stacking and theme styles. Author’s Wirepicker release article. - Livewire’s own JavaScript endpoint returns 404: the Livewire 3 docs describe this issue for an Nginx custom-route configuration. Check the instructions for your installed Livewire branch instead of applying v3-specific routing changes to v4. Livewire 3 installation.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
