Question

27

How to format date in v-Calendar?

rated 0 times [ 29] [ 2] / answers: 1 / hits: 6653 / 4 Years ago, tue, july 28, 2020, 12:00:00

I'am trying to get a proper output of date from the v-calendar. Now this looks like:

Fri Jul 31 2020 00:00:00 GMT+0200 (utc summertime)

This should be 2020-07-28 etc.. I Can't find anything in the documentation that work, anyone know how to change output?

Code:

{{ date }}



<v-date-picker

    v-model="date"

    color="red"

    is-inline

    :available-dates='dates'

    :masks='{ input:["L", "YYYY-MM-DD"] }'

/>

Script for test:

<script>

    var app = new Vue({

        el: "#dic",

        data: {

            date: moment().format('YYYY-MM-DD'),

        },

    });

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

taylert

Add To Favorites

Follow

Total Points: 627

Total Questions: 91

Total Answers: 108

Location: Mayotte

Member since Mon, Sep 12, 2022

2 Years ago

taylert questions

1 Check if at least two elements in an array are greater than zero - JavaScript/Typescript

Mon, Feb 17, 20, 00:00, 4 Years ago

1 How do a date range validation with vue/Quasar

Tue, Dec 10, 19, 00:00, 5 Years ago

1 JavaScript: When to use a Class vs. a prototype?

Fri, Sep 13, 19, 00:00, 5 Years ago

1 Is there a generic way to set state in React Hooks? How to manage multiple states?

Tue, Jul 9, 19, 00:00, 5 Years ago

1 this.$refs[(p + index)].focus is not a function

Tue, Jan 22, 19, 00:00, 5 Years ago

View All

answered 4 Years ago citlalia · Accepted Answer

Add a computed property called formattedDate based on date and use it and keep the data property :

let app = new Vue({

  el: '#app',

  data: {

    date: moment().format('YYYY-MM-DD'),

  },



  computed: {

    formattedDate() {

      return moment(this.date).format('YYYY-MM-DD')

    }

  }

})

<script src='https://unpkg.com/vue/dist/vue.js'></script>



<script src='https://momentjs.com/downloads/moment.min.js'></script>

<script src='https://unpkg.com/v-calendar'></script>

<div id='app'>

  {{formattedDate }}



  <v-date-picker v-model=date color=red is-inline />

</div>