Populating a HTML 5 date input

#1

Hi all, I’ve started my first project that contains Livewire. I’m only a few hours in.

My first attempt populates an input field based on some previously selected inputs. I should have done it in JS, however I wanted to learn Livewire!

Question is, why won’t Livewire populate a HTML Date field?

This is a very basic version of what I am trying.

 public function render()
    {
        if ($this->serviceInterval) {
            $this->nextServiceAt = Carbon::now()->addMonth($this->serviceInterval)->format('d/m/Y');
        }

        return view('livewire.service-interval');
    }

I’m old-school Laravel, so I am still writing HTML this way

    <div class="form-floating mb-3">
        {{ Form::date('next_service_at', old('next_service_at'), ['wire:model="nextServiceAt"', 'class' => 'form-control', 'id' => 'next_service_at', 'placeholder' => '']) }}
        {{ Form::label('next_service_at') }}
    </div>

This gives me a HTML 5 date picker.

This example works perfectly.

Originally, it wasn’t working and I was convinced I was learning wrong.
Simply changing the date input to a text input and LiveWire works as expected!

    <div class="form-floating mb-3">
        {{ Form::text('next_service_at', old('next_service_at'), ['wire:model="nextServiceAt"', 'class' => 'form-control', 'id' => 'next_service_at', 'placeholder' => '']) }}
        {{ Form::label('next_service_at') }}
    </div>

Does LiveWire not support the HTML5 date input?

#2

Hai, @kb6673

try format date like this Y-m-d

1 Like