How to toggle between input date and input number in Laravel 12 - Livewire

Question

I have 2 inputs (date and number) in view - blade, like this:

<div class="col-3">
    <label for="jatuhtempodate">Jatuh tempo</label>
    <input name="jatuhtempodate" id="jatuhtempodate" type="date" class="form-control mt-2" wire:model="jatuhtempodate"">
    @error('jatuhtempodate')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>
<div class="col-1">
    <input type="number" class="form-control mt-2" wire:model='jatuhtempohari' placeholder="days">
    @error('jatuhtempohari')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>

and I have 2 variables in Livewire component:

public $jatuhtempodate;
public $jatuhtempohari;

What I want, if now is 21/07/2025, and I change input date to 25/07/2025, the input number will be 4 automatically. And if I change the input number to 3, the input date will be 24/07/2025 automatically.

I already tried wire:model.live="jatuhtempodate", but it seems it doesn't work with input date.

masao · Accepted Answer · 2025-07-22 08:28:34Z

0

You can achieve this two-way sync between the date and the number input using Livewire’s updated lifecycle hook inside your Livewire component.

...

public $jatuhtempodate;
public $jatuhtempohari;

public function updatedJatuhtempodate($value)
{
    if ($value) {
        try {
            $date = Carbon::parse($value);
            $this->jatuhtempohari = $date->diffInDays(Carbon::now());
        } catch (\Exception $e) {
            $this->jatuhtempohari = null;
        }
    }
}

public function updatedJatuhtempohari($value)
{
    if (is_numeric($value)) {
        $this->jatuhtempodate = Carbon::now()->addDays((int) $value)->format('Y-m-d');
    } else {
        $this->jatuhtempodate = null;
    }
}

...

Please read https://livewire.laravel.com/docs/lifecycle-hooks to know more about Livewire lifecycle.

answered Jul 22 at 8:28

masao

8955 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ronny hidajat Jul 23 at 6:47

Hi, I try, but the result, when I change date, the input number doesn't change anything, etc.

ronny hidajat Jul 23 at 6:49

When I try to change to wire:model.live, after I change date, in a second, the date back again to now date/today, please help...

masao Jul 24 at 16:13

Can you try wire:model.defer?

masao Jul 24 at 16:20

Can you try wire:model.defer or wire:model.lazy? Also, please check date format as well.

ronny hidajat Jul 26 at 8:43

I try wire:model.lazy, it's still back again, but it work with wire:model.defer, but it doesn't call public function updatedJatuhtempodate($value):void what function does it call ? Thank you

masao Aug 6 at 4:48

Its supposed to call the function. otherwise it wont work

ronny hidajat Aug 7 at 7:38

I think I must read the whole program, if it call/miss something. Btw, thank you friends for all of your respon.

IGP · Accepted Answer · 2025-07-22 21:19:31Z

0

Having an update hook per property might cause an infinite loop (a change in the date then changes the number then changes the date then changes ...) so maybe you could use an internal property for the component (non reactive) to deal with this

use Illuminate\Support\Date;
use Livewire\Attributes\Validate;
use Livewire\Component;

class YourComponent extends Component
{
    #[Validate('date')]
    public $date;

    public int $diff_in_days = 0;

    protected bool $should_update = true;

    public function mount(): void
    {
        $this->date = Date::today()->toDateString();
    }

    public function updatedDate($value): void
    {
        if ($this->should_update) {
            $this->validate();

            $this->should_update = false; // prevent the updatedDiffInDays hook from changing $date, causing a loop
            $this->diff_in_days = Date::today()->diffInDays($value);
            $this->should_update = true;
        }
    }

    public function updatedDiffInDays(int $value): void
    {
        if ($this->should_update) {
            $this->should_update = false; // prevent the updatedDate hook from changing $diff_in_days, causing a loop
            $this->date = Date::today()->addDays($value);
            $this->should_update = true;
        }
    }
}

<input wire:model.live="date" type="date" />
<input wire:model.live="diff_in_days" type="number" />

answered Jul 22 at 21:19

IGP

16.4k5 gold badges34 silver badges55 bronze badges

1 Comment

ronny hidajat Jul 23 at 6:58

Hi, when I try, after I change date, in a second, the date back again to now date/today, and when I change number, in a second the number back again to 0

Collectives™ on Stack Overflow

How to toggle between input date and input number in Laravel 12 - Livewire

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related