Add Timezone Select to Filament Forms & Tables in Laravel

Of course, managing users in different time zones can get a bit tricky when you’re building global applications. Thankfully, it’s very easy to handle this nicely in Filament 4. In this guide, you will learn how you can include a Timezone Select in Filament 4 Laravel applications for capturing and displaying accurate data regarding time zones. Be it the design of user settings, event schedulers, or dashboards, this feature ensures consistency in the delivery of localized experiences for your users.

You will also learn how to install and use the official Filament Timezone Field plugin to add a timezone dropdown in Filament forms and tables with ease. Basic and advanced examples of customization will be covered, and we’ll even create filters for timezones. If you haven’t added analytics to your Laravel app, have a look at our comprehensive post on Add Google Analytics 4 (GA4) Tracking to Laravel.

Package: Filament Timezone Field

The Filament Timezone Field plugin by Tapp Network provides a ready-to-use dropdown field listing all timezones supported by PHP. It’s designed to work natively with Filament 4 and supports forms and tables.

Before moving further with practical examples, you need to install it into your Laravel 12 application. Open your terminal and enter below composer command to install this plugin:

composer require tapp/filament-timezone-field

Once installed, you can start using it in your Filament forms and tables without any extra configuration.

Basic Example of Using Timezone Select

To add a timezone field in your Filament form, simply use the TimezoneSelect class provided by the package. Here’s a minimal example:

<?php

namespace App\Filament\Resources\Users\Schemas;

use Filament\Schemas\Schema;
use Filament\Forms\Components\TextInput;
use Tapp\FilamentTimezoneField\Forms\Components\TimezoneSelect;

class UserForm
{
    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')->required(),
                TextInput::make('email')->email()->required(),
                TextInput::make('password')
                    ->password(),
                TimezoneSelect::make('timezone')
                    ->searchable()
                    ->default('UTC')
                    ->required(),
            ]);
    }
}

In this basic User resource example, we are using timezone select plugin with default UTC timezone. Below is output screenshot of same page.

This example adds a timezone dropdown where users can select their preferred timezone. It automatically populates the field with a comprehensive list of global timezones. You can utilize this for scheduled notifications as per user’s timezone.

Advanced Customization of Timezone Select in Filament Laravel

The plugin also allows advanced configuration to improve user experience and fit your project’s needs. You can set preferred defaults, customize labels, or group timezones for better clarity. Here’s an example of a more advanced configuration:

TimezoneSelect::make('timezone')
    ->label('Select Your Timezone')
    ->default(auth()->user()->timezone ?? 'Asia/Kolkata')
    ->searchable()
    ->helperText('Choose your local timezone for accurate time display.');

This setup automatically loads the authenticated user’s timezone as default. It also adds a search bar for easier navigation through the timezone list. Let’s take another example with different configuration for timezone selection in Filament.

TimezoneSelect::make('timezone')
    ->label('Your Local Timezone')
    ->getTimezoneFromBrowser()
    ->hideNames()
    ->required()
    ->helperText('We’ll auto-detect your timezone, or you can select it manually.');

Here it will automatically gets your timezone using browser and default selects it.

Timezone Filters

The package also supports using timezone filters directly within Filament tables. Therefore, you can display, sort, or filter data based on timezone values more efficiently.

use Tapp\FilamentTimezoneField\Tables\Filters\TimezoneSelectFilter;

TimezoneSelectFilter::make('timezone');

It enables you to filter records by timezone easily. For example, if you are running a SaaS platform with international clients, admins can easily view data filtered by region-specific timezones. Moreover, they can perform various actions on those records using Filament actions, which makes data management faster and more efficient.

Conclusion

One of the easiest ways to make your application friendly to people across the globe is by adding a timezone select in Filament 4 Laravel projects. The Filament Timezone Field plugin enables you to efficiently collect, display, and filter timezones, thus making the time data local and accurate to your users.