How set attribute in livewire datepicker?

#1

Hello,

In livewire 1.3 app looking at DatePicker example at laravel-livewire docs
I can not see how to set custom parameter to and to use it when date is selected?
I need to put into hidden input formated date for saving in db.
I add 1 parameter in attributes:

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

and in resources/views/components/date-picker.blade.php :
and try to read in in date selection event:

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

Which is the valid way ?

Thanks!

#2

Hey @mstdmstd,

i haven’t tried it myself, but you could try adding the value attribute to x-date-picker, this should set the value on your input, as you echo out the full $attributes bag to it. I guess, that Pikaday will pick this up.

Hope it works!

1 Like
#3

Thanks for good hint, I added attribute as:

and in the console of the browser I see my attribute : https://imgur.com/a/kV7Fu8c
But I failed to read this value in my 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);
                console.log('getAttribute:');
                console.log(this.el.getAttribute('hidden_element'));  // THAT DOES NOT WORK
                console.log(this.getAttribute('hidden_element')); // THAT DOES NOT WORK
                $('#'+this.getAttribute('hidden_element')).val( dateToMySqlFormat(this._d) );
            }
        })"
        type="text"
        {{ $attributes }}
    >
</div>

I got error :

VM667:16 Uncaught TypeError: this.getAttribute is not a function

Which way is correct?

#4

You can simply use Blade for this.

$attributes['hidden_element']

or if you need access to the attribute from your javascript

$el.getAttribute('hidden_element')

Haven’t tested it, but that should work.

#5

but what is $el here? How to get it?

#6

$el is a magic property, within the x-init callback, it should reference the element x-init is defined on.

1 Like