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('[email protected]', $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.

1 Like

Have you find the solution ?

No. I am looking into other datepickers at this point. Livewire and Alpine JS are so new, there aren’t very many comprehensive tutorials out there.

im struggling with multi select js lib. multiselect is working fine but I stuck where I want to change options of second select2 based on first select2. livewire does not update because of wire:ignore. Can you suggest me a way? or are you suggest me to go to something mature like Vue.js.

1 Like

That’s a tough call. I’m a beginner so I won’t be of much help. I believe that some are finding that if something new like Livewire is limiting them, then they need to move to something tried and true like Vue.js. I am looking forward to great things from Livewire, but it is limited. Try not to let those limitations stop you or frustrate you too much. Good luck!

1 Like

This is also not getting well with liveware and select2. I have no idea on it. I’m also beginner so I need help. If some one make a solution please upload it for others.

[https://github.com/livewire/livewire/issues/865#issuecomment-619299133](http://Problems of Select2)

hope this helps. i worked on my project:
$(’.order-date’).datepicker({
format: “yyyy-mm-dd”,
autoclose: true,
todayHighlight: true,
}).on(‘changeDate’, function(e){
@this.set(‘orderDate’, $(’.order-date’).val());
});

This helped me out. Finally after some hours of digging / debugging.

$(document).ready(function() {
        window.livewire.components.registerHook('afterDomUpdate',  () => {
            $('.dp').datepicker({
                format: "yyyy-mm-dd",
                autoclose: true,
                todayHighlight: true,
            }).on('change', function(e){
                @this.set('taskduedate', e.target.value)
            });
        });
    });