Tips for modifying the database's date format within a datatable

Currently, I am working on a Laravel Project and have a data table displaying various data. One of the pieces of information displayed is the date, which is in the format YYYY-MM-DD as stored in the database. However, I would like to present it in either 04 Feb 2020 or 04-02-2020 format. Below is the code snippet from my View:

var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('home.index') }}",

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                },
                {
                    data: 'title',
                    name: 'title',
                    orderable: false,
                },
                {
                    data: 'content',
                    name: 'content',
                    orderable: false,
                },
                {
                    data: 'progress',
                    name: 'progress'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'finish_date',
                    name: 'finish_date'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ]
        });

Here is an excerpt from my controller:

if ($request->ajax()) {
            $data = Post::where('user_id', Auth::id())->latest()->get();
            return Datatables::of($data)
                ->addIndexColumn()
                ->addColumn('action', function ($row) {

                    $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="' . $row->id . '" data-original-title="Edit"  class=" edit btn btn-primary btn-sm editProduct"><span class="fas fa-pen"></span></a>';

                    $btn = $btn . ' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="' . $row->id . '" data-original-title="Delete" class="btn btn-danger btn-sm deleteProduct"><span class="fas fa-trash"></span></a>';

                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('index');

I am wondering if there is a way to customize the date format for display?

Answer №1

To modify the columns of yajra-datatables, you can utilize the addColumn() method :

return Datatables::of($data)
    ->addIndexColumn()
    ->addColumn('action', function ($row) {
        $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="' . $row->id . '" data-original-title="Edit"  class=" edit btn btn-primary btn-sm editProduct"><span class="fas fa-pen"></span></a>';
        $btn = $btn . ' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="' . $row->id . '" data-original-title="Delete" class="btn btn-danger btn-sm deleteProduct"><span class="fas fa-trash"></span></a>';
        return $btn;
    })
    ->addColumn('finish_date', function($row)
      {
         $date = date("d F Y", strtotime($row->finish_date));
         return $date;
      })
    ->rawColumns(['action'])
    ->make(true);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing asynchronous requests with jQuery Mobile

Currently I am facing an issue while working with Jquery mobile: My problem arises when I try to load a list via ajax in a div. Whenever I attempt to load a jquery mobile formatted list through ajax, the classes are not being applied by jquery mobile and ...

Setting up initial values for React properties

Below is the React code snippet I am currently working with: this.state = { colsHiddenStatus: new Map([['rowNumber',true], ['id', false], ['firstName', false], ['lastName', false], ['mobile', false], [&a ...

What are the steps to generate a fresh array with additional attributes from an existing array?

My goal is to create a new list using an existing list called messages. The reason behind this is because I need to pass this new list into a specific React component. This component requires an object with the properties id and name, rather than the defau ...

What is the best way to include a collapsible submenu in a dropdown menu

Is there a way to incorporate a collapse menu into a dropdown menu? The desired functionality is for the dropdown menu to close when clicking on a menu item with collapse, and then have the collapse feature work again when reopening the dropdown menu. & ...

Utilizing directive scope variables to generate dynamic templates

Looking for a solution to dynamically render forms with various controls based on a specific Type value specified in a JSON object. The form will be created based on user input, so the necessary question types may vary. While we will define the types, they ...

Import a picture file into Photoshop and position it at a designated location

I need assistance with developing a function that can load an image and position it at specific x, y coordinates in Photoshop. Below is the code I have so far: var docRef = app.activeDocument; function MoveLayerTo(fLayer, fX, fY) { var Position = fLaye ...

Tips for passing props while clicking on a v-data-table:

I am currently facing an issue in my app while using v-data-table. I am able to pass props with an extra slot, but I want the entire row to be clickable in order to open a dialog with the prop item: <template v-slot:item.actions="{ item }"> ...

Discover the process of integrating PWA features into an Express web application

I'm currently in the process of integrating PWA into a web application. I've created a manifest.json file and added it to the head of my page, which is loading correctly. However, the service worker registered in my app.js doesn't seem to be ...

When attempting to refresh the page, an error occurred stating: 'Unhandled TypeError: Cannot access properties of undefined (reading FetchApi.js:23 'data')'

Upon the initial run of the code, the mappings data appear as desired. However, upon refreshing the page, an error is displayed. Can someone please advise on how to rectify this error and what could be causing it? The provided code: import React, { useE ...

Issue encountered with Tesseract.js: Unable to run 'toBlob' function on 'HTMLCanvasElement': Exporting tainted canvases is not allowed

Currently using Chrome and a server set up using node. Below is the HTML code: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie= ...

What is the methodology behind stackoverflow's implementation of comments functionality?

I am looking to implement a feature comparable to the comment system on Stack Overflow for this website. The idea is to enable users to type in a text, click submit, and instantly see it displayed on the page without having to navigate away. It has to be ...

Enhance Odoo Conversations (mail)

I've been attempting to customize the Odoo discussions, but have hit a roadblock. Here is my goal: https://i.sstatic.net/1lJnc.png I am adding messages using the "New Message" button to an Odoo module (in class mro.order). The messages are appearing ...

Can you show me a way to retrieve a scope item from the parent controller in AngularJS using a child directive?

Here is the structure of my HTML view: School.html <html> <body> <div class="col-xs-9"> <!-- major bootstrap html code goes over here --> </div> <div class="col-xs-3"> <!--Call to directive goes ...

What is the process of converting an Array that is nested within an Object?

I am facing compile errors while attempting to convert an Object containing an Array of Objects. Here is the initial structure: export interface CourseRaw { metaInfo: MetaInfoRaw; gameCode: number; gameText: string; images?: ImageRaw[]; // Having ...

Resetting dynamic form changes in Vue.js explained

Currently, I am using a template like this: <div> <div v-for="(item, key) in items" :key="key"> <div> <input type="text" :value="item.title"> </div> ...

What are some ways to accomplish this task without relying on a photo editing tool?

Is it possible to swap the image link: https://i.sstatic.net/Wa4mo.jpg with this new link: https://i.sstatic.net/hqVuQ.jpg without having to use a photo editor? Below is the CSS and HTML code: I was unable to upload the logo due to the restrictio ...

Easy methods to navigate between screens without using React Router libraries

After experimenting with two different methods to switch between screens in a simple application (up to 3 modes/screens), I am still in the learning phase and mainly focusing on practicing with useState and possibly useEffect for certain scenarios. I&apos ...

How can NgRx be used to properly reset or empty an array within the state object?

What is the proper way to reset an array in an NgRx reducer? I am using NgRx to create a basic reducer that includes an empty array called myArray in the initial state: import * as MyActions from './my.actions'; const myState = { myValue: & ...

What is the best way to configure the flip direction in JQuery?

Looking for a solution to flip the content right to left direction using this jQuery script that flips the content when clicked? The code seems to be working fine, but currently, it alternates between flipping right to left and left to right. Is there a ...

Issue with AngularJS ng-model not updating the value of a hidden input

My goal is to transmit form data using hidden input like this: <input type="hidden" required ng-model="formHolder.template[position].itemKey[itr]" ng-value="[[ formItem ]]" /> The value of formItem can be any string. Issues arise when the strings c ...