Laravel Datatables Date Format with created_at Example

By Hardik Savani November 20, 2024 Category : Laravel

In this tips, I will show you how to display created_at column value with date format with laravel yajra datatables.

To display a date column with DataTables, you can use the addColumn() method in Yajra Datatables. You can format the date like this:

Solution 1:

->addColumn('created_at', function ($row) {
    return $row->created_at->format('Y-m-d H:i:s'); 
})

Solution 2:

->addColumn('created_at', function ($row) {
    return \Carbon\Carbon::parse($row->expiration_date)->format('d-m-Y');
})

You can see the full code of controller file and blade file:

Controller File Code:

<?php
   
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\User;
use DataTables;
  
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        if ($request->ajax()) {

            $data = User::query();

            return Datatables::of($data)
                    ->addIndexColumn()
                    ->addColumn('status', function($row){
                        if($row->status){
                            return 'Active';
                        }else{
                            return 'Inactive';
                        }
                    })
                    ->addColumn('created_at', function ($row) {
                        return $row->created_at->format('Y-m-d H:i:s'); 
                    })
                    ->addColumn('action', function($row){
       
                            $btn = 'View';
      
                            return $btn;
                    })
                    ->rawColumns(['action', 'status'])
                    ->make(true);
        }
          
        return view('users');
    }
}

Blade File Code:

Read Also: How to Set Custom Redirect URL After Login in Laravel Jetstream?
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Yajra Datatables Tutorial - ItSolutionStuff.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
       
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">Laravel Yajra Datatables with Filter - ItSolutionStuff.com</h3>
        <div class="card-body">

            <div class="filter mt-3 mb-3">
                <strong>Filter:</strong><br/>
                <div class="row">
                    <div class="col-md-3">
                        <label>Name:</label>
                        <input type="text" name="name" id="name" class="form-control change">
                    </div>
                    <div class="col-md-3">
                        <label>Email:</label>
                        <input type="text" name="email" id="email" class="form-control change">
                    </div>
                    <div class="col-md-3">
                        <label>Status:</label>
                        <select class="form-select" id="status" name="status">
                            <option value="">--Select Status--</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Creation Date:</label>
                        <input type="text" name="daterange" class="form-control daterange" value="" />
                    </div>
                </div>
            </div>

            <table class="table table-bordered data-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Created At</th>
                        <th>Status</th>
                        <th width="100px">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
       
</body>
       
<script type="text/javascript">
  $(function () {
        
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('users.index') }}",
            data: function(d){
                d.name = $("#name").val();
                d.email = $("#email").val();
                d.status = $("#status").val();
                d.startDate = $('.daterange').data('daterangepicker').startDate.format("YYYY-MM-DD");
                d.endDate = $('.daterange').data('daterangepicker').endDate.format("YYYY-MM-DD");
            }
        },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'created_at', name: 'created_at'},
            {data: 'status', name: 'status'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
        
  });
</script>
</html>

I hope it can help you...

Tags :
Previous

Laravel Eloquent Find with Trashed Record Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares