Livewire and Bootstrap Datepicker

wire:bind the input field to the public property in the component

I changed the section of my view to be this:

<div class="input-group date taskduedatepicker">
  <input type="text" name="taskduedate" wire:bind="taskduedate" class="form-control datepicker" id="taskduedate" placeholder="Due Date" data-provide="datepicker" data-date-autoclose="true" data-date-today-highlight="true" autocomplete="off">
</div>

And I still get "null" if I dd($this->taskduedate) in my controller.

Did I get the syntax correct?

I believe the correct way to bind data is to use wire:model, but the resources I mentioned explain that wire:model does not work with other JS because of how it affects the value. The suggestion is to remove wire:model and add JS that manually sets the value for that Livewire property on the changed value of the input field.

That is why I added the script at the end of the view. I believe the problem lies there, unless I'm missing something else.

And I still get "null" if I dd($this->taskduedate) in my controller.

Controller or Component

There is no way the data gets to your controller unless you post it as a form.

In the earlier post, I should have said wire:model="taskduedate" but I was working from memory

Livewire component binds to a single root element so you might need to move your script inside the div so that it has access to the same component scope.

It is the "controller" of the component itself. Sorry if I am not using the right terminology.

If I dd($this->tasktext), I see what I input into the "tasktext" input box, so the data is getting sent to that component controller file. Just not the taskduedate.

Also, my understanding of Livewire's purpose is to send the data to the component controller which rewrites the DOM with the new data without technically submitting a form, though the data still persists to the db and changes on the page without a page refresh.

The problem is that Livewire does not notice that the date field has changed.

If you use wire:model as suggested, change the date with the datapicker, then make a small change to the text in the date field, Livewire will notice it has changed and push the new value to the server.

So, I think something like you tried within the datepicker events will be required, but it MUST be within the scope of the Livewire component, and its single root element (a div in your case)

In your datepicker javascript, add a console.log to see if it is being fired when the date changes.

Sorry for the late reply. I was out of the country for a while.

Thanks for the suggestion. However, I'm using the Bootstrap datepicker that calls an external js file and then uses data properties to create the datepicker, so there isn't really a script section of my code where I can add a console.log event.

There's something wrong with my simple javascript that isn't setting the property value correctly. I was hoping someone familiar with Livewire and datepickers would notice what I'm doing wrong.

At your javascript, add this code:

$('#datepicker').on('change', function (e) {
       @this.set('taskduedate', e.target.value);
});

so that your javascript code looks like this:

<script>
('#datepicker').datepicker({
   dateFormat: 'dd-mm-yy',
});

$('#datepicker').on('change', function (e) {
       @this.set('taskduedate', e.target.value);
});
</script>

@Snapey I'm trying to do the same thing but it does not work for me