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.

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