Filament•6mo ago

6 digits in year usingDateTimePicker & DatePicker

When entering the date by typing on the keyboard, i can enter 202407 before it jumps over to the month "section" of the field. Anyone knows how to solve this? Here is an example of the code:

Forms\Components\DateTimePicker::make('ends_at')
                ->required()
                ->hidden(fn (Forms\Get $get) => $get('is_all_day'))
                ->seconds(false)
                ->format('Y-m-d H:i')
                ->displayFormat('Y-m-d H:i'),
            Forms\Components\DatePicker::make('date')
                ->required()
                ->visible(fn (Forms\Get $get) => $get('is_all_day'))
                ->format('Y-m-d')
                ->displayFormat('Y-m-d'),

Forms\Components\DateTimePicker::make('ends_at')
                ->required()
                ->hidden(fn (Forms\Get $get) => $get('is_all_day'))
                ->seconds(false)
                ->format('Y-m-d H:i')
                ->displayFormat('Y-m-d H:i'),
            Forms\Components\DatePicker::make('date')
                ->required()
                ->visible(fn (Forms\Get $get) => $get('is_all_day'))
                ->format('Y-m-d')
                ->displayFormat('Y-m-d'),

Solution:

Thanks alot, that solved it. For others looking for the solution, here is how i added it: With DateTimePicker ->maxDate('9999-12-31T23:59')...

Jump to solution

5 Replies

AzkaOP•6mo ago

A screenshot how it looks now. Ofcourse i can manually just put the correct year, but not really user friendly as most ppl just type in the year and then the month right after without having to click into the next field

toeknee•6mo ago

Can you post the whole code? Date the looks to be: Ym-m-d You might be setting. adefault date or you have a date as a string in the DB

AzkaOP•6mo ago

In the DB, the starts_at and ends_at is datetime, not string. I dont set a default date in the code from what i can find. Here is the whole code, super thankfull if you have time to have a look: https://codeshare.io/Q8QgNm

awcodes•6mo ago

this is unrelated to filament and how native datetime inputs work in the browser. you best bet is to set max="9999-12-31" or max="9999-12-31T23:59" if it's a datetime-local input. this will prevent the extra years in some browsers but not all, but will at least throw a validation error if they type too many digits for the year.

Solution

Azka•6mo ago

Thanks alot, that solved it. For others looking for the solution, here is how i added it: With DateTimePicker ->maxDate('9999-12-31T23:59') and with DatePicker: ->maxDate('9999-12-31')

Gaming

Programming

6 digits in year usingDateTimePicker & DatePicker