haringsrob / livewire-datepicker
A standalone livewire datepicker component without dependencies
Installs: 3 519
Dependents: 0
Suggesters: 0
Security: 0
Stars: 37
Watchers: 6
Forks: 9
Open Issues: 3
Requires
- php: 8.*
- illuminate/support: ^9|^10
- livewire/livewire: ^2|^3
Requires (Dev)
- orchestra/testbench: ~7
- phpunit/phpunit: ~9.0
This package is auto-updated.
Last update: 2024-10-30 01:59:39 UTC
README
Livewire datepicker is a standalone livewire component that gives you a calendar, datepicker and date-range picker.
This is not yet a stable release.
Installation
Via Composer
$ composer require haringsrob/livewire-datepicker
Usage
This package uses tailwindcss.
You need to add ./vendor/haringsrob/livewire-datepicker/resources/**/*.blade.php
to the purge list of your
tailwind.config.json
To use this, create a new livewire component and extend the DatePickerComponent
class:
use Haringsrob\LivewireDatepicker\Http\Livewire\DatePickerComponent; class TestCalendar extends DatePickerComponent { // Pick any of the 3 options. public string $type = self::TYPE_RANGE_PICKER; public string $type = self::TYPE_DATEPICKER; public string $type = self::TYPE_DISPLAY_ONLY; }
Then depending on the needs, add availability data:
public function getAvailabilityData(): Collection { return collect([ new DatePickerDayData(Carbon::yesterday(), classes: 'bg-red-500 text-white'), new DatePickerDayData(Carbon::tomorrow(), classes: 'bg-yellow-500 text-white'), new DatePickerDayData(Carbon::today(), classes: 'bg-green-500 text-white'), new DatePickerDayData(date: Carbon::now()->setDay(31), disabled: true, cannotPickOver: true), new DatePickerDayData(date: Carbon::now()->setDay(26), disabled: true, cannotPickOver: true), ]); }
And finally emit your events to other components (if needed) (example):
/** * This method is called whenever the date range or a new date is set. */ public function onDatesSet(): void { $this->emit('rangeSet', ['from' => $this->startRange->format('Y-m-d'), 'till' => $this->endRange->format('Y-m-d')]); } /** * This method is called whenever the date range or a new date is unset. */ public function onDatesUnSet(): void { $this->emit('rangeUnset'); }
More documentation will follow but you can always have a look at the component to see what options are available.
Change log
Please see the changelog for more information on what has changed recently.
Testing
$ composer test
Contributing
Please see contributing.md for details and a todolist.
Security
If you discover any security related issues, please email haringsrob@gmail.com instead of using the issue tracker.
License
MIT. Please see the license file for more information.