Filament•7mo ago

Looking for a way to get a time range value input field

Hey all, Im currently moving from nova to filament and need an opening hours input field alternative. For this I currently have the following:

Forms\Components\Section::make(__('opening_hours'))->schema([
    Repeater::make('opening_hours.monday')
        ->simple(
        // time range field
    ),
    Repeater::make('opening_hours.tuesday')
        ->simple(
            // time range field
        )

Forms\Components\Section::make(__('opening_hours'))->schema([
    Repeater::make('opening_hours.monday')
        ->simple(
        // time range field
    ),
    Repeater::make('opening_hours.tuesday')
        ->simple(
            // time range field
        )

The problem I have is that I can't find a good input field for getting a time range value formatted the following way: 09:00-17:00. Preferably I want the input to look something like the attached image. If anybody has a recommendation for how I might be able to get a time range formatted like this, inside of the repeaters, please let me know.

6 Replies

toeknee•7mo ago

Welcome to the DarkSide!

TimePicker::make('opening_hours.monday')

TimePicker::make('opening_hours.monday')

But I would probably do something like https://aw.codes/work/table-repeater And then have a select for the day i.e. Monday, Tuesday etc with 'disableOptionsWhenSelectedInSiblingRepeaterItems()'

Table Repeater | aw.codes

A modified version of the Filament Forms Repeater to display it as a table.

toeknee•7mo ago

soo:

TableRepeater::make('payslips')
  ->headers([
    Header::make('Day'),
    Header::make('Opening'),
    Header::make('Closing')
  ])
  ->schema([
    Select::make('day')
      ->options(['Monday'])
      ->disableOptionsWhenSelectedInSiblingRepeaterItems(),
    TimePicker::make('opening_hours'),
    TimePicker::make('closing_hours')
  ])

TableRepeater::make('payslips')
  ->headers([
    Header::make('Day'),
    Header::make('Opening'),
    Header::make('Closing')
  ])
  ->schema([
    Select::make('day')
      ->options(['Monday'])
      ->disableOptionsWhenSelectedInSiblingRepeaterItems(),
    TimePicker::make('opening_hours'),
    TimePicker::make('closing_hours')
  ])

Along those lines

TjielOP•7mo ago

@toeknee Ty for the response, the table-repeater indeed is better for my intended purpose. The issue what im having is still kind of the same. Using a variations on the code you just send the opening hours saved is the following: {"monday":[{"start":"07:00","end":"23:00"},{"start":"08:30","end":"22:00"}]}. Which would fine, if I didn't need to keep the old data that has been created using the nova forms. Which is the following: {"monday":[],"tuesday":[],"wednesday":["12:00-14:00"],"thursday":[],"friday":[],"saturday":[],"sunday":[],"exceptions":[]}

toeknee•7mo ago

Why do you need to use the old data?

TjielOP•7mo ago

The project already has been deployed and I need the data to go with me to the filament version.

toeknee•7mo ago

Got ya, you can do a formatStateUsing() to format the data, and then use the setAttribute using on the model to store the data how you want? Else you can build your own custom field to handle it exactly as you wish

Gaming

Programming

Looking for a way to get a time range value input field