DatePicker UI Shows active date when date is disabled

Mrkbingham commented 3 months ago

Package

filament/filament

Package Version

v3.2.50

Laravel Version

v10.48.3

Livewire Version

v3.4.9

PHP Version

8.2.14

Problem description

When disabling "today's date" the UI indicates that today's date is select-able and/or currently selected:

The date (in this case, March 31st) shows as available when the datepicker loads. This can lead to confusion in that users believe the selection is available, when in fact they cannot do anything in the UI. Especially on mobile, with the inability to hover, this is prominent.

My proposal is to change the class bindings in the date-time-picker.blade.php file to this:

x-bind:class="{
    'text-gray-950 dark:text-white': ! dayIsToday(day) && ! dayIsSelected(day),
    'cursor-pointer': ! dayIsDisabled(day),
    'text-primary-600 dark:text-primary-400':
        dayIsToday(day) &&
        ! dayIsSelected(day) &&
        focusedDate.date() !== day &&
        ! dayIsDisabled(day),
    'bg-gray-50 dark:bg-white/5':
        focusedDate.date() === day && ! dayIsSelected(day) && ! dayIsDisabled(day),
    'text-primary-600 bg-gray-50 dark:bg-white/5 dark:text-primary-400':
        dayIsSelected(day),
    'pointer-events-none': dayIsDisabled(day),
    'opacity-50': dayIsDisabled(day),
}"

Expected behavior

The disabled date should have the same disabled UI as any other dates since it cannot be clicked on, and is not currently selected.

Steps to reproduce

Create a new model named Customer php artisan make:model Customer -m
Create a new resource for the Customer php artisan make:filament-resource Customer

Add the following code to the form:

public static function form(Form $form): Form
{
    // Generate a list of every date for this month in the format of 'YYYY-MM-DD'.
    $disabledDates = collect(range(1, now()->daysInMonth))
        ->map(fn ($day) => now()->startOfMonth()->addDays($day - 1)->format('Y-m-d'))
        ->toArray();
    return $form
        ->schema([
            Forms\Components\DatePicker::make('calendar_form_date')
                ->label('Date')
                ->required()
                ->live()
                ->native(false)
                ->firstDayOfWeek(0)
                ->closeOnDateSelection()
                ->disabledDates($disabledDates)
        ]);
}

Two Bugs:

First, open the date-picker, and the UI will display an active-state for today's date. (this is resolved by my proposal above)
Second, choose another month from the dropdown and select a date. Change the month-selector back to the current month, and the same numeric date will show as active in the current month, even though the day is disabled. (This does not have a solution proposed here)

Reproduction repository

https://github.com/Mrkbingham/filament-issue-datepicker-disable-date-today

Relevant log output

No response

danharrin commented 2 months ago

Please make a PR for the proposed changes so we can review :)

Mrkbingham commented 2 months ago

@danharrin added! https://github.com/filamentphp/filament/pull/12405

filamentphp / filament