Tips on how to properly display the date in v-Calendar

Question

Tips on how to properly display the date in v-Calendar

I'm struggling to format the date output from the v-calendar. Currently, it appears like:

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

However, I would like it to display as 2020-07-28. I have searched through the documentation but couldn't find a solution that works. Does anyone know how to change the output?

Here's the code snippet:

{{ date }}

<v-date-picker
    v-model="date"
    color="red"
    is-inline
    :available-dates='dates'
    :masks='{ input:["L", "YYYY-MM-DD"] }'
/>

Below is the script used for testing purposes:

<script>
var app = new Vue({
    el: "#dic",
    data: {
        date: moment().format('YYYY-MM-DD'),
    },
});
</script>

javascript vue.js vuejs2 vue-component vcalendar

Answer 1

Answer №1

Create a new computed property named formattedDate that is derived from the date property without altering the existing 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>

Answer 2

Create a new computed property named formattedDate that is derived from the date property without altering the existing 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>

Tips on how to properly display the date in v-Calendar

Answer №1

Similar questions

What could be causing the 405 error in my post request?

Utilizing Node Js and Socket.Io to develop a cutting-edge bot

What is the reason behind "Script" being considered the offspring of "Body"?

As I iterated over the Vehicles API data, I encountered an issue while trying to access specific Vehicle information. I received an error message stating "Cannot read property 'id' of undefined

What could be the reason for the emptiness of my AngularJS scope object?

(Discord.JS) Bot failing to send direct message upon user joining the server

Unexpected addition of values to a list occurs when scrolling through a web element using Selenium

Speed up - Handle alias resolution with module federation

Can you guide me on how to establish a cookie within a selenium webdriver javascript script?

I'm receiving an error at initBackend that says "Cannot read properties of undefined (reading 'Vue'). Does anyone know how I can fix this issue?

Show one marker on the map from a GeoJson file

Struggling with implementing Angular and TypeScript in this particular method

Verify whether the variable is defined or present within the Angular controller

AngularJS: Issue with directive function not being executed

How can I customize the <span> element created by material-ui?

Importing three.js using ES6 syntax

Prevent a function from executing using ClearTimeout()

Drop down menus fail to appear after the screen has been resized

Retrieving selected item values in Angular 2 using ng2-completer

Unveil SQL Limit with a Simple Scroll Load