如何在 livewire 日期选择器中设置属性？答案

【问题标题】：How set attribute in livewire datepicker?如何在 livewire 日期选择器中设置属性？
【发布时间】：2020-11-28 09:18:54
【问题描述】：

在 livewire 1.3 应用程序中查看 https://laravel-livewire.com/docs/alpine-js 的 DatePicker 示例我看不到如何设置自定义参数并在选择日期时使用它？我需要输入隐藏的输入格式化日期以保存在数据库中。我在属性中添加了 1 个参数：

<x-date-picker
    wire:model="start_date"
    id="start_date"
    autocomplete="off"
    attributes="{hidden_element:'hidden_start_date'}"
/>

在 resources/views/components/date-picker.blade.php 中：并尝试在日期选择事件中读取：

<div>
    <input
        x-data
        x-ref="input"
        x-init="new Pikaday({
            field: $refs.input,
            format:'M/D/YYYY',
            onSelect: function() {
                console.log(this.el); // that shows html code of datepicker
                console.log('getAttribute:');
                console.log(this.el.getAttribute('hidden_element')); // shown null
                
                $( this.el.getAttribute('hidden_element') ).val( dateToMySqlFormat(this._d) );
                // code above does not work !
            }
        })"
        type="text"
        {{ $attributes }}
    >
</div>

哪种方式有效？

谢谢！

【问题讨论】：

标签： laravel-livewire

【解决方案1】：

我找到了决定：

<x-date-picker
    wire:model="start_date"
    id="start_date"
    autocomplete="off"
    hidden_element="hidden_start_date"
/>

在我的组件中：

<div>
    <input
        x-data
        x-ref="input"
        x-init="new Pikaday({
            field: $refs.input,
            format:'M/D/YYYY',
            onSelect: function() {
{{--                console.log(this);--}}
                $('#'+$el.getAttribute('hidden_element')).val( dateToMySqlFormat(this._d) );
            }
        })"
        type="text"
        {{ $attributes }}
    >
</div>

！

【讨论】：