Weave Code
Livewire Datepicker Laravel Package
karnoweb/livewire-datepicker
Jalali and Gregorian datepicker for Livewire 3 and Alpine.js with wire:model support for single, range, and multiple dates, min/max limits, themes, RTL, and Gregorian export for storage. No npm or Vite setup required.
A Livewire 3 datepicker component built on Alpine.js that supports both Jalali (Persian) and Gregorian calendars. It integrates directly with wire:model for single, range, and multiple selections, and can display Jalali dates in the UI while storing Gregorian values in your database—ideal for Laravel apps targeting Persian users. No npm or Vite setup is needed, since the script and bundled jalaali-js load automatically.
- Dual calendars — Jalali UI with configurable Gregorian export format
- Selection modes — Single date, date range, or multiple with
maxSelections - Constraints — Min/max limits and disabled dates
- Theming & RTL — Light, dark, or auto themes with right-to-left layout
- Accessible — ARIA attributes and keyboard navigation
Frequently asked questions about Livewire Datepicker
- How do I install karnoweb/livewire-datepicker in a Laravel app?
- Install it with Composer: run composer require karnoweb/livewire-datepicker:^1.0 for Laravel 11–12, or use the ^13.0 tag shown in the README for Laravel 13. Publishing the config is optional via php artisan vendor:publish --tag=datepicker-config. You do not need to run npm install or add a Vite entry, because the datepicker script and jalaali-js are loaded automatically when you render the component. Then use the Blade tag <x-jalali-datepicker wire:model="birth_date" /> in any view.
- Does this package support both Jalali (Persian) and Gregorian calendars?
- Yes. The component can display and select dates in either Jalali (Persian) or Gregorian format. A common pattern is showing Jalali in the UI for Persian users while storing Gregorian values in the database, which the package supports through its export format setting. Conversion helpers jalali_to_gregorian() and gregorian_to_jalali() are included and backed by morilog/jalali.
- Which Laravel, PHP, and Livewire versions does karnoweb/livewire-datepicker support?
- The stated requirements are PHP ^8.2, Laravel ^11.0 or ^12.0, and Livewire ^3.0 or ^4.0. The README also shows a ^13.0 Composer tag for Laravel 13, so confirm the actual constraint set in composer.json before adopting. Alpine.js ships with Livewire, so no extra frontend dependency is required. Gate adoption on a verified support matrix if you are on an older Livewire 2 codebase.
- How do I store Gregorian dates in the database while showing Jalali in the UI?
- Use the export format option so the component renders Jalali but emits a Gregorian value such as Y-m-d through wire:model. The package ships jalali_to_gregorian() and gregorian_to_jalali() helpers, so you can normalize the value server-side before saving. As a hard acceptance criterion, add Laravel validation such as required|date and verify hydration between the picker output, the Livewire property, and the Eloquent column. Also check timezone handling if your app stores timestamps rather than plain dates.
- Does this datepicker require npm, Vite, or a separate build step?
- No. The datepicker script, including the bundled jalaali-js library, is served automatically by the package when you use <x-jalali-datepicker>. There is no npm install, no Vite entry, and no extra asset pipeline to maintain in your application. That makes it easy to drop into existing Blade views, though it also means a bundled third-party JavaScript dependency you should review for license and browser support before merging.
- How do I use range or multiple date selection with wire:model?
- Bind the component with wire:model and choose the selection mode: single, range, or multiple. Multiple selection supports an optional maxSelections limit, which is useful for picking availability windows or a set of report dates. If you render several instances on the same page, give each one a unique wire:key so Livewire updates the correct component.
- Can I set min/max dates and disable specific dates?
- Yes. The package supports min and max limits plus disabled dates, so you can constrain selectable days to a booking window or exclude holidays. These are exposed as component or config options rather than requiring you to override internals. Mirror the same constraints with server-side validation, because client-side limits alone are not a security control.
- Is the datepicker RTL, accessible, and does it support dark mode?
- Yes. The component ships an RTL layout for Persian, ARIA attributes with keyboard navigation, and light, dark, or auto themes that follow the system preference. Accessibility is claimed rather than certified, so include an a11y check in your pilot exit criteria, especially against native input behavior on mobile Safari. Also test whether the field degrades to a usable native input when JavaScript fails to load.
- How do I customize formats, first day of week, theme, and locale strings?
- Publish the config file with php artisan vendor:publish --tag=datepicker-config, then edit config/datepicker.php. It exposes default formats, theme, first day of week, and locale strings, and optional view/asset publishing lets you override the Blade markup. Treat the concrete config keys as unverified until you inspect the published file, since the README describes patterns rather than a confirmed schema.
- What is the maintenance and production risk of depending on this package?
- The repository shows minimal adoption signals, with zero stars, zero dependents, and a readme/changelog-only maturity level, plus no documented test suite or CI posture. The engineering risk is low because the integration surface is small, but the program risk is real: pin the version, wrap the component in your own adapter, and plan an internal fork or owner. Also review the license and the bundled jalaali-js dependency, and route it through security review before merging.
Weaver
How can I help you explore Laravel packages today?