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">×</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.