Free tools Windows power users keep installed
One-click scans. No signup required.
Install Wirepicker with Composer, load its CSS and JavaScript through either published assets or Vite, then bind its component to a Livewire property. Use a Y-m-d string for one date and an associative start/end array for a range. Before installing, check the package’s PHP and Illuminate requirements against your application’s locked dependencies.
Check compatibility before installing
Wirepicker is a date and date-range picker for Laravel, Livewire, and Alpine. The Packagist record for v1.1.0, published October 2, 2026, lists PHP >=8.2, illuminate/support >=11.0, and illuminate/view >=11.0. Livewire is listed as a suggested dependency. Check the package metadata against the PHP and Illuminate versions in your application’s dependency lockfile; those minimums are not a complete Laravel support matrix. Wirepicker on Packagist
If Livewire is not already in the app, its requirements are separate from Wirepicker’s. Livewire 4’s installation documentation lists Laravel 10+ and PHP 8.1+ and gives Composer as the installation route. Use the documentation branch matching your installed version rather than applying version-specific setup steps across releases. Livewire 4 installation · Livewire 3 installation
Install Wirepicker and load its assets
From the Laravel project directory, install the package and publish its assets:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11#1 Best Overall
composer require edulazaro/wirepicker
php artisan vendor:publish --tag=wirepicker-assetsChoose one of the package’s documented asset routes based on how the application serves frontend files.
Use published files
For assets served from Laravel’s public directory, add these references to the layout used by the page. Place the stylesheet in the document head and load the script with defer:
<link rel="stylesheet" href="{{ asset('vendor/wirepicker/css/wirepicker.css') }}">
<script src="{{ asset('vendor/wirepicker/js/wirepicker.js') }}" defer></script>Import files through Vite
If the app already bundles frontend assets with Vite, import Wirepicker’s files into the existing application bundle 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 alternatives: use the route that fits the project’s asset pipeline rather than loading both by default. Wirepicker is described as having no runtime dependencies and can work with or without Livewire or Alpine, so its ordinary use does not require installing a separate Alpine instance. If using Livewire, follow its own version’s asset guidance; Livewire 4 automatically injects its assets, while its explicit @livewireStyles and @livewireScripts directives let you control placement. Do not load Alpine a second time if the application already includes it. Wirepicker package documentation · Livewire 4 installation
Recommended Free Tools
Add a single-date picker to a Livewire form
Place the component where the field should appear and bind it to a component property:
<x-wirepicker wire:model="startsOn" />The bound value is a Y-m-d string, or an empty string when no date is selected. For example, initialize a nullable-by-convention empty field as a string in the Livewire component:
Rank #3
public string $startsOn = '';Wirepicker documents support for wire:model modifiers, including .live and .blur. Choose the update behavior that suits the form; the component’s own documentation does not prescribe one modifier for every use case. Wirepicker package documentation
Bind a date range with the expected property shape
For a range, add the range prop and bind an associative array with start and end keys. Initialize both values as empty strings:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<x-wirepicker range wire:model.live="period" />public array $period = ['start' => '', 'end' => ''];The first date click sets the start and the second sets the end; the package documentation says dates may be selected in either order. Keep the array shape when reading or validating the value in Livewire rather than treating the range as a single date string. Wirepicker package documentation
Configure limits, presets, labels, and appearance
The component’s documented options let you constrain or customize the field without changing its fundamental binding shape:
| Option | Documented behavior |
|---|---|
range |
Enables range selection; default is false. |
presets |
Accepts range shortcuts; default is empty. |
placeholder |
Sets the field placeholder. |
min, max |
Set date bounds using Y-m-d values. |
clearable |
Controls whether the selection can be cleared; default is true. |
name, value |
Useful for ordinary, non-Livewire form submission; a range submits as period[start] and period[end]. |
size |
Supports md and sm; the documentation suggests small size for toolbars. |
locale |
Sets the locale. |
week-start |
Sets the first weekday: 0 for Sunday through 6 for Saturday. |
id |
Sets the component ID. |
For example, configure a bounded range with shortcuts like this:
<x-wirepicker
range
wire:model.live="period"
min="2026-01-01"
max="2026-12-31"
: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. Month and weekday names, the displayed date format, and week start use the browser’s Intl support. The package’s own short interface labels ship in English and Spanish; publish translations when adding or changing interface languages:
php artisan vendor:publish --tag=wirepicker-langThe README says the default locale follows the app locale. Wirepicker package documentation
Choose a theme and dark-mode behavior
Set data-wire-theme on the document’s <html> element or on a container to select a theme. Documented themes include 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". The package also exposes CSS variables such as --wp-accent, --wp-range, and --wp-hover, along with variables for trigger colors and sizing, calendar colors, radius, day size, and z-index. Check the chosen theme against your application’s design and inspect its appearance in context. Wirepicker package documentation
Verify selection and diagnose integration issues
After adding the field, check that the page loads the picker assets, selecting a date updates the expected Livewire property, and clearing or changing a selection produces the value shape your form expects. For a range, inspect both array keys rather than checking only whether the component rendered.
- The component renders without styling: confirm the published stylesheet path or Vite CSS import is included in the page’s compiled assets.
- The calendar does not initialize: confirm the JavaScript asset is loaded by the layout or bundle and check the browser console for script errors.
- Livewire does not receive the expected value: verify the property name and binding, then confirm a single-date property is a string and a range property has
startandendkeys. - Livewire assets or Alpine conflict: check the installation instructions for the app’s Livewire version and avoid including Alpine twice. Livewire 3 has version-specific asset guidance, including a documented Nginx custom-route case where its default JavaScript endpoint can return 404; do not apply v3 asset configuration to v4 without checking the relevant docs.
The package 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. It emits a bubbling wirepicker:change event whose detail contains value and, for a range, start and end. If external code changes a field value, the documented Wirepicker.refresh() method repaints the picker; Wirepicker.close() closes the calendar. The author describes the popover as being drawn on body to avoid clipping inside surrounding containers. These are documented package behaviors, not a substitute for checking the interaction in your own page and layout. Wirepicker package documentation · Author’s Wirepicker release article
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsQuick Recap
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.
