haringsrob / livewire-datepicker

一个无需依赖的独立 livewire 日期选择器组件

dev-main 2023-10-30 18:42 UTC

This package is auto-updated.

Last update: 2024-08-30 01:44:03 UTC


README

Livewire 日期选择器是一个独立的 livewire 组件,它为您提供了日历、日期选择器和日期范围选择器。

这还不是一个稳定的版本。

安装

通过 Composer

$ composer require haringsrob/livewire-datepicker

用法

此包使用 tailwindcss。

您需要将 ./vendor/haringsrob/livewire-datepicker/resources/**/*.blade.php 添加到您的 tailwind.config.json 的 purge 列表中

要使用此组件,创建一个新的 livewire 组件并扩展 DatePickerComponent

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;
}

然后根据需要添加可用性数据

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),
    ]);
}

最后将事件发射到其他组件(如果有必要)(示例)

    /**
     * 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');
    }

将提供更多文档,但您始终可以查看组件以了解有哪些选项可用。

变更日志

请参阅变更日志以获取有关最近更改的更多信息。

测试

$ composer test

贡献

请参阅contributing.md以获取详细信息和待办事项列表。

安全性

如果您发现任何与安全性相关的问题,请通过电子邮件haringsrob@gmail.com联系,而不是使用问题跟踪器。

许可证

MIT。请参阅许可证文件以获取更多信息。