How to Generate a Dropdown List of Timezone in Laravel?

Hello Developer,

In this tutorial, I will show you laravel generate timezone list in dropdown. I explained simply about laravel timezone list array. This tutorial will give you a simple example of laravel timezone list seeder. you'll learn laravel timezone list select box.

In this example, we will create timezones with name, offset and diff_from_gtm fields. then we will create seeder to store all timezones to database table. we will use timezone_identifiers_list() function to get all time zone and store into database.

So, let's see the simple example step by step:

Step 1: Install Laravel

This step is not required; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Migration and Model

here, we will create new migration for adding new table timezones with some fields. so let's run bellow command:

php artisan make:migration create_timezones_table

After this command you will find one file in following path "database/migrations" and you have to put bellow code in your migration file for create timezones table.

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('timezones', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('offset');
            $table->string('diff_from_gtm');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('timezones');
    }
};

Now you have to run this migration by following command:

php artisan migrate

Next, After create "timezones" table you should create Timezone model for timezones table, so first create file in this path app/Models/Timezone.php and put bellow content in Timezone.php file:

app/Models/Timezone.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Timezone extends Model
{
    use HasFactory;
    /**
     * Write code on Method
     *
     * @return response()
     */
    protected $fillable = [
      'name', 'offset', 'diff_from_gtm'
    ];
}

Step 3: Create Seeder Class

This step, we will create new seeder call TimezoneTableSeeder and store all timezones to it:

php artisan make:seeder TimezoneTableSeeder

Further, put the below code in database\seeders\TimezoneTableSeeder.php:

database\seeders\TimezoneTableSeeder.php

<?php
  
namespace Database\Seeders;
   
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\Timezone;
  
class TimezoneTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        $timestamp = time();
        foreach (timezone_identifiers_list() as $zone) {
            date_default_timezone_set($zone);
            $zones['offset'] = date('P', $timestamp);
            $zones['diff_from_gtm'] = 'UTC/GMT '.date('P', $timestamp);
  
            Timezone::updateOrCreate(['name' => $zone], $zones);
        }
    }
}

Now, we will run seeder commands:

php artisan db:seed --class=TimezoneTableSeeder

Step 4: Create Route

In this is step we need to create routes for display list of all timezones. so open your "routes/web.php" file and add following route.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ProfileController;
   
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
    
Route::get('profile', [ProfileController::class, 'index']);

Step 5: Create Controller

Here,we require to create new controller ProfileController with index method to display form. So let's put bellow code.

app/Http/Controllers/ProfileController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Timezone;
  
class ProfileController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        $timezones = Timezone::Orderby('offset')->get();
  
        return view('timezoneList', compact('timezones'));
    }
}

Step 6: Create View File

In Last step, let's create timezoneList.blade.php and data.blade.php for display timezone list and put following code:

resources/views/timezoneList.blade.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Laravel Generate Timezone List in Dropdown List - ItSolutionStuff.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"/>
</head>
<body>
  
  <div class="container mt-4">
    <h2>Laravel Generate Timezone List in Dropdown List - ItSolutionStuff.com</h2>
  
    <form>
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Select Timezone:</label>
  
        <select class="form-control mb-2" name="timezone_id">
            <option value="">Please select...</option>
            @foreach($timezones as $timezone)
            <option value="{{ $timezone->id }}">{{ $timezone->name }} ({{ $timezone->offset }})</option>
            @endforeach
        </select>
  
      </div>
    </form>
  </div>
  
</body>
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/profile

Output:

I hope it can help you...