Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mkirk's avatar
Level 14

Bind Livewire Carbon property to default HTML datepicker

Hi folks,

I am trying to bind a Carbon property to the default HTML date picker input field. And I can not get it working without a workaround. Has anybody ideas to make it better? I found a lot of posts regarding a similar issue. But this always includes having a Carbon property on a Eloquent Model. They use a model cast to circumvent that. But I don't won't to bind a Model property. I have a property directly in my Livewire class.

Here my class:

class WorkloadList extends Component
{
    public Carbon $date;

    public function mount()
    {
        $this->date = Carbon::createMidnightDate();
    }

    public function render()
    {
        return view('workload');
    }
}

My view:

<input type="date" wire:model.debounce="date">

My problem is, that the input field isn't populated with the date on load. It shows 'yy-mm-dd' as a placeholder. And when I change the date in the input, I get these error on the update:

TypeError
Cannot assign string to property App\Http\Livewire\Workload\WorkloadList::$date of type Carbon

It's clear to me, that a proper cast to string is missing. But how can I get that? I also tried DateTime type instead of Carbon. It's the same issue.

Here is my current workaround. But that feels ugly and clunky.

class WorkloadList extends Component
{
    public string $dateString;
    public CarbonImmutable $dateObject;

    public function mount()
    {
        $this->dateObject = CarbonImmutable::createMidnightDate();
        $this->dateString = $this->dateObject->toDateString();
    }
    
    public function updatedDateString($value)
    {
        $this->dateObject = CarbonImmutable::createFromFormat('Y-m-d', $value);
    }

    public function render()
    {
        return view('workload');
    }
}
<input type="date" wire:model.debounce="dateString">

Best, Arne

0 likes
3 replies
bobwurtz's avatar
bobwurtz
Best Answer
Level 2

The Livewire docs outline that only the following types of data can be used for data binding:

Properties can ONLY be either JavaScript-friendly data types (string, int, array, boolean), OR one of the following PHP types: Stringable, Collection, DateTime, Model, EloquentCollection.

So, to answer your original question - you cannot bind a Carbon property using Livewire.

I think you're making this harder than it needs to be. HTML type="date" will set the value to a string with the date format Y-m-d. If you just use public $date and then bind to the HTML input everything should be fine. You can always validate the date format when the user submits the form. Or, you could validate it in a updatedDate() function like you have in your workaround.

2 likes
MannikJ's avatar

@bobwurtz

The Livewire docs outline that only the following types of data can be used for data binding:

Properties can ONLY be either JavaScript-friendly data types (string, int, array, boolean), OR one of the following PHP types: Stringable, Collection, DateTime, Model, EloquentCollection.

So, to answer your original question - you cannot bind a Carbon property using Livewire.

Maybe I am just not misunderstanding something. But exactly for the doc quote you posted I would assume that Carbon objects will be automatically casted, since a Carbon object is in fact a DateTIme object: class Carbon extends DateTime implements CarbonInterface

And if not, the question then would still be, how is DateTime casting supposed to work?

1 like
mikromike's avatar

Hello, I have similar problem: cannot send carbon date to other livewire component.

I have mounted carbon property :

 $this->actionDate = Carbon::now()
                   ->toDateString();

it shown in input field correctly, maybe you can try that.

Thanks Mika.

Please or to participate in this conversation.