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:

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 class="tasks">
        <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 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 class="form-row">
            <div class="form-group col-md-12">
                <button class="btn btn-primary" wire:click="addTask" type="submit">Add</button>
            <ul class="list-group">
                @foreach($this->deal['tasks'] as $task)
                <li class="list-group-item d-flex justify-content-between align-items-center">
                        <input type="checkbox" class="mr-4">
                        {{Carbon\Carbon::parse($task['taskduedate'])->format('m/d/Y')}} - {{$task['tasktext']}}
                        <form class=".mb-0" action="#" method="POST">
                            <button class="btn btn-sm btn-danger">&times;</button>
   dateFormat: 'dd-mm-yy',
   onSelect: function(taskduedate) {
       @this.set('taskduedate', taskduedate);


public function addTask()
            '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.