如何在 Livewire 中实现日期选择器？

Question

我正在学习 Livewire，我想在我的表单中使用日期选择器。我从 tailwindcomponents.com 中找到了一个有用的组件，但无法理解如何将其转换为 livewire 可重用组件。

尾风组件：https://tailwindcomponents.com/component/datepicker-with-tailwindcss-and-alpinejs

我在视图目录中创建了一个 blade 文件，但无法理解如何添加 HTML 和 JS 代码。也可以访问像 wire:model="birthday"

这样的生日值

<x-input.datepicker wire:model="birthday" id="datepicker"/>

Answer 1

我使用 Pikaday 完成此任务：

npm i pikaday

在app.js中：

window.Pikaday = require('pikaday');

创建新的 blade 组件

views/components/input/date.blade.php

和

@props([
    'error' => null
])

<div
    x-data="{ value: @entangle($attributes->wire('model')) }"
    x-on:change="value = $event.target.value"
    x-init="
        new Pikaday({ field: $refs.input, 'format': 'DD.MM.YYYY', firstDay: 1 });"
>
    <input 
        {{ $attributes->whereDoesntStartWith('wire:model') }} 
        x-ref="input"
        x-bind:value="value" 
        type="text" 
        class="pl-10 block w-full shadow-sm sm:text-lg bg-gray-50 border-gray-300 @if($error) focus:ring-danger-500 focus:border-danger-500 border-danger-500 text-danger-500 pr-10 @else focus:ring-primary-500 focus:border-primary-500 @endif rounded-md" 
    />
</div>

这样使用：

<x-input.date wire:model="birthday" :error="$errors->first('birthday')"/>

Answer 2

我遇到了同样的问题，但还需要一个时间选择器。根据 Upvote 的回答，我使用 Flatpickr.

构建了一个解决方案

不安装 Pikaday，而是使用 install guide.

安装 Flatpickr

创建一个名为 views/components/input/date.blade.php 的新组件并使用如下内容：

@props([
    'error' => null
])

<div
    x-data="{ value: @entangle($attributes->wire('model')) }"
    x-on:change="value = $event.target.value"
    x-init="flatpickr($refs.input, {enableTime: true, dateFormat: 'Z', defaultHour: 18, time_24hr: true })"
>
    <input 
        {{ $attributes->whereDoesntStartWith('wire:model') }} 
        x-ref="input"
        x-bind:value="value" 
        type="text" 
        class="pl-10 block w-full shadow-sm sm:text-lg bg-gray-50 border-gray-300 @if($error) focus:ring-danger-500 focus:border-danger-500 border-danger-500 text-danger-500 pr-10 @else focus:ring-primary-500 focus:border-primary-500 @endif rounded-md" 
    />
</div>

如果您不想使用 24 小时时间格式，请删除 time_24hr: true 选项。
然后，您可以按照 Upvote 描述的相同方式使用该组件。

如何在 Livewire 中实现日期选择器？

How to implement datepicker in Livewire?

datepicker

laravel

tailwind-css

laravel-livewire

alpine.js