skip to Main Content

I Am trying to retrieve only the date part from date representation. My database server is phpmyadmin and i retrieve data through laravel controller.
I need to get only the date part, for example 2022-01-24 instead of 2022-01-24T18:30:00.000000Z from created_at column.

image phpmyadmin.

image response

My web.php path is,

Route::get('/fetch/curriculumVitaes', [AppHttpControllersAdminCurriculumVitaesController::class, 'index']);

I fetch the data through laravel controller and my function is index(),

public function index()
{     
   $curriculumVitaes =  CurriculumVitaes::where('deleted', '=', '0')->get();

   return $curriculumVitaes;
}

And I retrieve the data in frontend vue.js,

 <tr v-for="(curriculumVitae, index) in curriculumVitaes" :key="index">
    <td class="text-center">{{ index + 1 }}</td>
    <td class="text-center">{{ curriculumVitae.created_at }}</td>
</tr>

2

Answers


  1. Chosen as BEST ANSWER

    Use moment

    First we need to install moment npm package that will allow to change date format.

    npm install moment
    

    Now you can create a global function to set the format you want, to do so you must open the file resources/js/app.js and put the following code:

    import moment from 'moment';
    
    Vue.filter('formatDate', function(value) {
        if (value) {
            return moment(String(value)).format('MM/DD/YYYY')
        }
    });
    

    Now in all your js components you can apply the format as follows:

    {{ response.created_at | formatDate }}
    

  2. I am not very familiar with Laravel yet and I haven’t used Vue.js. But I would think you could also use core php to resolve this. I’ve modified your code to what you see below. When I’m retrieving a date from the MySQL database that I want formatted, I use date(‘format’, variable). In your case that would result in the code I have below. The format can be displayed a number of ways including: ‘m/d/y’, ‘d/m/y’, ‘y/d/m’, and more. m representing month, d representing day, and of course y representing year.

    As @Uwe pointed out, my suggestion was php code inside the vue.js code. However, because I know you’re using both php and vue.js, I still wonder if my modified solution below may work. Or somewhere in that ballpark.

    <tr v-for="(curriculumVitae, index) in curriculumVitaes" :key="index">
        <td class="text-center">{{ index + 1 }}</td>
        <td class="text-center">{{ <?php echo date("y/d/m", curriculumVitae.created_at); ?> }}</td>
    </tr>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search