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

Question

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

tailwindcomponents：https://tailwindcomponents.com/component/datepicker-with-tailwindcss-and-alpinejs

我在视图目录中创建了一个 Blade 文件，但无法理解如何添加 HTML 和 JS 代码。还可以访问生日值，例如wire：model =“birthday”

<x-input.datepicker 线：model="生日" id="datepicker"/>

Answer 1

我有同样的问题，但也需要一个时间选择器。根据 Upvote 的答案，我使用Flatpickr构建了一个解决方案。

使用安装指南安装 Flatpickr，而不是安装 Pikaday 。

创建一个名为的新组件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 描述的相同方式使用该组件。

Answer 2

我使用Pikaday来完成此任务：

npm i pikaday

在 app.js 中：

window.Pikaday = require('pikaday');

创建新的刀片组件

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')"/>