How to reactively update the `displayFormat()` of DatePicker?

This will not work. It shows the display format changed in the html, but not in the UI:

Select::make('date_format')
    ->options(DateFormat::class)
    ->required()
    ->live()
    ->markAsRequired(false),
DatePicker::make('fiscal_year_start')
    ->label('Start')
    ->live()
    ->native(false)
    ->maxDate(static fn (Get $get) => $get('fiscal_year_end'))
    ->displayFormat(static function(Get $get) {
        return $get('date_format') ?? DateFormat::DEFAULT;
    })
    ->seconds(false)
    ->required()
    ->localizeLabel()
    ->markAsRequired(false),

Select::make('date_format')
    ->options(DateFormat::class)
    ->required()
    ->live()
    ->markAsRequired(false),
DatePicker::make('fiscal_year_start')
    ->label('Start')
    ->live()
    ->native(false)
    ->maxDate(static fn (Get $get) => $get('fiscal_year_end'))
    ->displayFormat(static function(Get $get) {
        return $get('date_format') ?? DateFormat::DEFAULT;
    })
    ->seconds(false)
    ->required()
    ->localizeLabel()
    ->markAsRequired(false),

Solution:

Hey, just wanted to check up on this and let you know that I found a fix/hack using this: ```php Select::make('date_format') ->options(DateFormat::class) ->required()...

Jump to solution

6 Replies

Dennis Koch•14mo ago

Not sure, whether you can do this at all after the DatePicker is initialized

Andrew WalloOP•14mo ago

That’s very unfortunate

Dennis Koch•14mo ago

Probably depends on whether the DatePicker we use supports reinit with a new configuraiton. I'm just guessing though

Andrew WalloOP•14mo ago

Alright well I guess I will just have to change the display format after the record is saved. Would be cool to change it dynamically tho! Thanks

Solution

Andrew Wallo•14mo ago

Hey, just wanted to check up on this and let you know that I found a fix/hack using this:

Select::make('date_format')
    ->options(DateFormat::class)
    ->required()
    ->live()
    ->markAsRequired(false),
DatePicker::make('fiscal_year_start')
    ->label('Start')
    ->live()
    ->extraAttributes(['wire:key' => Str::random()]) // HERE...
    ->native(false)
    ->maxDate(static fn (Get $get) => $get('fiscal_year_end'))
    ->displayFormat(static function(Get $get) {
        return $get('date_format') ?? DateFormat::DEFAULT;
    })
    ->seconds(false)
    ->required()
    ->localizeLabel()
    ->markAsRequired(false),

Select::make('date_format')
    ->options(DateFormat::class)
    ->required()
    ->live()
    ->markAsRequired(false),
DatePicker::make('fiscal_year_start')
    ->label('Start')
    ->live()
    ->extraAttributes(['wire:key' => Str::random()]) // HERE...
    ->native(false)
    ->maxDate(static fn (Get $get) => $get('fiscal_year_end'))
    ->displayFormat(static function(Get $get) {
        return $get('date_format') ?? DateFormat::DEFAULT;
    })
    ->seconds(false)
    ->required()
    ->localizeLabel()
    ->markAsRequired(false),

Andrew WalloOP•14mo ago

The extraAttributes() was added just to reinitialize the field after the state change

Gaming

Programming

How to reactively update the `displayFormat()` of DatePicker?