Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/haringsrob/livewire-datepicker
A standalone livewire datepicker component
https://github.com/haringsrob/livewire-datepicker
Last synced: 1 day ago
JSON representation
A standalone livewire datepicker component
- Host: GitHub
- URL: https://github.com/haringsrob/livewire-datepicker
- Owner: haringsrob
- License: mit
- Created: 2022-05-22T09:16:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-15T10:04:25.000Z (6 months ago)
- Last Synced: 2024-10-31T02:04:34.545Z (15 days ago)
- Language: PHP
- Size: 289 KB
- Stars: 37
- Watchers: 6
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- Contributing: contributing.md
- License: license.md
Awesome Lists containing this project
README
# LivewireDatepicker
Livewire datepicker is a standalone livewire component that gives you a calendar, datepicker and date-range picker.
This is not yet a stable release.
| Range picker | Date picker |
|---------------------------------------------|-------------------------------------------|
|  |  |
## Installation
Via Composer
``` bash
$ 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:
```php
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:
```php
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):
```php
/**
* 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](changelog.md) for more information on what has changed recently.
## Testing
``` bash
$ composer test
```
## Contributing
Please see [contributing.md](contributing.md) for details and a todolist.
## Security
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
## License
MIT. Please see the [license file](license.md) for more information.