Laravel Livewire无法获取Flowbite日期选择器值，选中后值为NULL

Flowbite日期选择器是通过JavaScript动态修改输入框值的，Livewire默认监听的事件有时候抓不到JS的修改，这是这类JS组件和Livewire绑定的常见坑，给你几个实用解法：

1. 手动触发Livewire需要的更新事件 #

JS修改输入框值后，Livewire没收到更新通知，所以要在Datepicker的回调里手动触发input事件，让Livewire捕获到新值。

在页面或组件的JS代码中添加这段：

document.addEventListener('livewire:initialized', () => {
    const dateInput = document.getElementById('date_filed');
    new Datepicker(dateInput, {
        autohide: true,
        onChange: () => {
            dateInput.dispatchEvent(new Event('input'));
        }
    });
});

2. 调整wire:model的绑定方式 #

试试把wire:model改成wire:model.lazy，它会在输入框失去焦点时同步值，能兼容JS修改的场景：

<input datepicker datepicker-autohide type="text" wire:model.lazy="leaveApplication.date_filed" id="date_filed" name="date_filed" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">

如果不需要实时更新，也可以用wire:model.defer，它会在表单提交时再同步值。

3. 确保Datepicker在组件挂载后初始化 #

如果Livewire组件是动态加载的，页面初始加载时可能还没渲染出输入框，导致Datepicker初始化失败。可以用Livewire的事件来触发初始化：

在组件的blade文件里加初始化标记：

<div wire:init="setupDatepicker">
    <!-- 你的日期选择器容器代码 -->
</div>

然后在Livewire组件类中添加方法：

public function setupDatepicker()
{
    $this->dispatch('init-datepicker');
}

最后在JS中监听这个事件：

document.addEventListener('init-datepicker', () => {
    const dateInput = document.getElementById('date_filed');
    new Datepicker(dateInput, {
        autohide: true,
        onChange: () => {
            dateInput.dispatchEvent(new Event('input'));
        }
    });
});

这样能保证输入框渲染完成后再初始化Datepicker，避免找不到元素的问题。

4. 检查组件的属性绑定 #

确认Livewire组件里的leaveApplication属性配置正确：

• 如果是模型实例，确保date_filed在模型的$fillable数组中
• 如果是数组，初始化时要给date_filed预留位置

比如组件类代码：

public $leaveApplication;

public function mount()
{
    $this->leaveApplication = new LeaveApplication(); // 或者从数据库读取已有数据
}

模型代码：

class LeaveApplication extends Model
{
    protected $fillable = ['date_filed', /* 其他需要填充的字段 */];
}

内容的提问来源于stack exchange，提问作者KrutSednar