How to dynamically format date on item-text inside v-autocomplete (Vuetify)

Question

I have this v-autocomplete which receives an array of items to display from GrowthTasks.edges

<v-autocomplete label="Start Week" 
:items="GrowthTasks.edges" item-text="node.growthStartDate" item-value="node.growthStartDate" dense></v-autocomplete>

The item-text receives the text from there by acessing node.growthStartDate, which is a date format like : "2020-05-06".

Now I want to turn it into a format like "2020-W19" , which I know is possible using moment("YYYY-[W]WW") but I dont know how to tell this to item-text.

Basically, I want the result on the item-text to be the same as if I was using :

{{ node.growthStartDate | moment("YYYY-[W]WW") }}

which works.

Any idea on how can do it ?

Nikola Pavicevic · Accepted Answer · 2022-03-06T19:37:46.397

You can create computed property and return formated dates:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      GrowthTasks: {edges: [{growthStartDate: "2020-05-06"}, {growthStartDate: "2020-06-07"}]}
    }
  },
  computed: {
    items() {
      return this.GrowthTasks.edges.map(obj => ({ ...obj, growthStartDate: moment(obj.growthStartDate).format("YYYY-[W]WW") }));
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-autocomplete label="Start Week" 
:items="items" item-text="growthStartDate" item-value="growthStartDate" dense></v-autocomplete>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

at the moment it full fills the requirement but imagine, if he wants to formate the date on many other componants with different date formats then? The best way is to create a global filter and send it "desired formate date" as a parameter as in my answer. https://stackoverflow.com/a/71374342/2959918 — Arslan Butt, Mar 09 '22 at 11:36

score 1 · Answer 2 · answered Mar 06 '22 at 21:27

You can use filters or methods using v-slot:item, If you want to pass a date to the moment.js, I suggest to use Filters, you can register filters globally and can use them anywhere in your application.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      GrowthTasks: {edges: [{growthStartDate: "2020-05-06"}, {growthStartDate: "2020-06-07"}]}
    }
  },
  filters: {
    myDateFilter(date, desireFormat) {
      return moment(date).format(desireFormat);
    }
}
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
  <v-app>
    <v-main>
      <v-container>
      
        <v-autocomplete label="Start Week" 
:items="GrowthTasks.edges" item-text="growthStartDate" item-value="growthStartDate" dense>
      <template v-slot:item="data">
       {{ data.item.growthStartDate |  myDateFilter('YYYY-[W]WW') }}
      </template>
</v-autocomplete>
      
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

How to dynamically format date on item-text inside v-autocomplete (Vuetify)

2 Answers2