0

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', [App\Http\Controllers\Admin\CurriculumVitaesController::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>
Uwe
  • 385
  • 1
  • 5
  • 14
SrihariSangeeth
  • 9
  • 2
  • Hi SrihariSangeeth, what did you already try and what did not work? Please have a look at these for further questions. :) [How do I ask and answer homework questions](https://meta.stackoverflow.com/questions/334822/how-do-i-ask-and-answer-homework-questions) [How much research effort is expected](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) – Uwe Aug 15 '22 at 15:29
  • How could you solve your problem? Look at it step for step - You want to achieve to have another date format as you got from the database. - Let's assume you don't want to change your database. - You get all CVs from the database into `$curriculumVitaes` So you can either change it before you give it back to your Vue Application or change it in your Vue JS App. I personally would prefer it in PHP and I would look at the answered question: [Convert one date format into another in PHP](https://stackoverflow.com/questions/2167916/convert-one-date-format-into-another-in-php) – Uwe Aug 15 '22 at 15:30
  • @Uwe yes.. thank you now I have an idea how to search ... sorry that I'm new to StackOverflow – SrihariSangeeth Aug 20 '22 at 08:43

2 Answers2

0

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>
bluzman
  • 1
  • 2
  • Hi bluzman It seems not correct. There is a bracket missing and it looks like PHP Code in the VueJS Code, which would not work. For a similar transformation, you would use something like moment.js or day.js – Uwe Aug 15 '22 at 17:34
  • @Uwe you are correct. In my haste to help I forgot a closing parenthesis, and forgot I was adding a php solution inside vue.js code. Probably because the OP is using both php and vue.js. I will edit my suggestion, but as I admitted in my initial post, I'm not familiar with vue.js. So take my suggestion with a grain of salt so-to-speak. – bluzman Aug 15 '22 at 21:52
  • No problem @bluzman :) But your solution will not work as there are some problems. **1)** You are in a Vue JS `for loop` and it expects a variable and not an actual value between these brackets as it will replace the variable while being rendered in the browser. - **2)** As PHP is server-side rendered and VueJS Browser rendered you can't access the value from the JS, as it is not there yet. - **3)** The PHP code would not be rendered at all as it would cause an ` Undefined constant "curriculumVitae"` error. – Uwe Aug 16 '22 at 08:50
  • try to add code not with the VueJS Code but with the PHP Code. Before he returns `return $curriculumVitaes;` you could walk with a foreach and change the date. – Uwe Aug 16 '22 at 08:53
0

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 }}
SrihariSangeeth
  • 9
  • 2