Filament•15mo ago

Table Builder - TextInput Column - Date Picker as content

Hello there, I would like to know if it would be possible to have a datepicker input created inside the text input column, checked the docs but couldn't find information related to that. Thanks 😄

13 Replies

cheesegrits•15mo ago

So you want two fields, a DatePicker and a TextInput, and when you select a date you want it entered into the TextInput?

Naz'haghulOP•15mo ago

Thank you for the reply! Nope, I want only 1 field, the column is supposed to be have rows where the user can select a date, it's only a date picker but I am facing issues to use it inside the table builder

awcodes•15mo ago

Tables\Columns\TextInputColumn::make('created_at')
  ->type('datetime-local')
  ->getStateUsing(fn ($record) => $record->created_at->toDateTimeLocalString()),

Tables\Columns\TextInputColumn::make('created_at')
  ->type('datetime-local')
  ->getStateUsing(fn ($record) => $record->created_at->toDateTimeLocalString()),

it'll be a native date time picker, don't think you'd be able to use the custom filament one in the table.

Naz'haghulOP•15mo ago

Thank you for the reply! Just tested that, it solves the issue but using that I need to format the input, I will try to find more info about that 😅

cheesegrits•15mo ago

Can you explain what you mean by "format the input"?

Naz'haghulOP•15mo ago

The default format is "mm/dd/yyyy" and I would need the format to always be "dd/mm/yyyy"

cheesegrits•15mo ago

So you need to modify the state after the user selects a date, before it gets written to the database?

Naz'haghulOP•15mo ago

I managed to set the update and data is being properly modified, the issue now is only what is being displayed to the user

cheesegrits•15mo ago

Yeah, afaik the datetime-local is always going to use the user's locale setting, so whatever format theior browser / OS uses.

Naz'haghulOP•15mo ago

Yep, thanks, that's why I would like to use the custom date picker from filament, tried a lot of stuff here without any success... not even close 😅

cheesegrits•15mo ago

It'll be tough. The real solution would be to add a DatePickerColumn to Filament, either as a PR on core or as a plugin, which operates on actual date(time) columns. I do see a need for that, and usually I'm up for implementing things like that just for fun. But I hate coding date related stuff with a burning passion. Spent waaaaaay to much of my life fighting with date code.

Naz'haghulOP•15mo ago

Date code is always painfull... I am totally lost here, I have more experience with front-end stuff and making progress really slowly

awcodes•15mo ago

Datetime-local should be fine since it compensates the user’s preference. Meaning the format would be what’s appropriate for them. It gets tough though when trying to do everything the form fields can do in a table column. That’s why you can’t just drop a TextInput in there. A PR could be good though if you can get it to work. I’m betting there’s a reason it doesn’t exist already though, but Dan would have to answer that.

Gaming

Programming

Table Builder - TextInput Column - Date Picker as content