Pass data in Livewire component with JavaScript

Question

I have a Datepicker with custom attribute. I give this attribute with JavaScript, and I try to pass this att with JavaScript to my Livewire controller. This attribute is added with JavaScript because I'm using a library. So I have access to this attribute in JavaScript. I want to give it to the variable I created in class.

<input id="birth-date" type="text" autocomplete="off" placeholder="dd/mm/yyyy" 
       class="form-control air-datepicker" data-position="bottom right"/>

<i class="btn btn-primary btn-sm text-light" id="date_start_btn" 
   onclick="startday()">save date</i>

<script>
    function startday() {
        var startday = document.getElementById('birth-date').getAttribute('data-jdate');
        document.getElementById('birth-date').value = startday;
        document.getElementById('date_start_btn').classList.remove("btn-primary");
        document.getElementById('date_start_btn').classList.add("btn-success");
    }
</script>

I want to send startday to my Livewire component to use.

The input #birth-date does not have a custom attribute data-jdate. If it did, use dataset — evolutionxbox
– evolutionxbox, Commented Apr 25, 2022 at 8:54
This attribute is added with JavaScript because I'm using a library. I have access to this attribute in JavaScript. I want to give it to the variable I created in class — Reza Khodarahmi
– Reza Khodarahmi, Commented Apr 25, 2022 at 8:58

Reza Khodarahmi · Accepted Answer · 2022-04-25 09:23:49Z

1

Its worked for me!!

<input id="birth-date" wire:model="date" type="text"  autocomplete="off" placeholder="dd/mm/yyyy" class="form-control air-datepicker" data-position="bottom right" />
    
<script>
                                
function startday() {
var startday = document.getElementById('birth-date').getAttribute('data-jdate');
document.getElementById('birth-date').value = startday;
    
@this.set('date', startday);
                               document.getElementById('date_start_btn').classList.remove("btn-primary");
document.getElementById('date_start_btn').classList.add("btn-success");
}
</script>

answered Apr 25, 2022 at 9:23

Reza Khodarahmi

892 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass data in Livewire component with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related