Suggested Livewire DatePicker

Is there a suggested datepicker to use with Laravel and Livewire?

I like the Boostrap datepicker and am trying to use it, and it works fine at choosing and showing the date in the field. But I can’t get it into the db.

I have seen this discussion: Using Livewire with Select2 Selectpicker
And these docs:https://laravel-livewire.com/docs/third-party-libraries/

But I can’t get my code to allow the correct property to receive the correct value:

Component View:

<div class="col-md-6">
    <div class="row">
        <div class="col-md-9"><h3><a href="/deals/{{$this->deal->id}}">{{$this->deal->dealtype}}</a></h3></div>
        <h1>DealID: {{ $this->deal['id'] }}</h1>
        <div class="col-md-3">
            <a href="link_to_action('DealsController@destroy', $title, $parameters = array(), $attributes = array());">Delete</a>
        </div>
    </div>
    <div class="tasks">
        <h5>Tasks</h5>
        <div class="card-block">
        <div class="form-row">
            <div class="input-group form-group col-md-9">
                <input type="text" name="tasktext" class="form-control" placeholder="New Task" wire:model="tasktext">
            </div>
            <div class="form-group col-md-3" id="datepickerfield">
                <div class="input-group date taskduedatepicker">
                <input type="text" name="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>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-12">
                <button class="btn btn-primary" wire:click="addTask" type="submit">Add</button>
            </div>
        </div>
        </div>
        <div>
            <ul class="list-group">
                @foreach($this->deal['tasks'] as $task)
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <div>
                        <input type="checkbox" class="mr-4">
                        {{Carbon\Carbon::parse($task['taskduedate'])->format('m/d/Y')}} - {{$task['tasktext']}}
                    </div>
                    <div>
                        <form class=".mb-0" action="#" method="POST">
                            @csrf
                            <button class="btn btn-sm btn-danger">&times;</button>
                        </form>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
<script>
('#datepicker').datepicker({
   dateFormat: 'dd-mm-yy',
   onSelect: function(taskduedate) {
       @this.set('taskduedate', taskduedate);
   }
});
</script>

Controller:

public function addTask()
    {
        $this->deal->tasks()->create([
            'tasktext' => $this->tasktext,
            'taskduedate' => $this->taskduedate,
        ]);
    }

It may be that my Javascript is wrong.

I think the JavaScript is wrong. When you make a selection in the date picker is there a network request? If not, then something is wrong there.

You may also want to create a stack and push your js to the stack.

It’s just a bootstrap datepicker. It shows a calendar, you click on a date. The date goes in the input box. And I see it on the page in the box. But Livewire can’t read the box evidently. Which seems kinda stupid.

So, ok, I agree there is probably something wrong with my Javascript. I said that already, implying that I don’t know what is wrong with it.

I don’t know anything about stacks or pushing things to them.

I use Laravel to make PHP easy
I use Livewire to make Javascript functionality easy
I use Bootstrap Datepicker to make getting a date into a box easy.

This shouldn’t be that complicated.

I’m sure there is something within my Javascript that someone can see and fix, who knows JS better than me.