V-calendar: Selected dates in YYYY-MM-DD format?

Created on 13 Sep 2019 · 6Comments · Source: nathanreyes/v-calendar

Hi,

I'm trying to accomplish a selected date in a daterange using YYYY-MM-DD format.

I know that I can get this working using js Date function, but in older version it was possible to set the daterange in other format. Is this still possible?

Here's a fiddle: https://jsfiddle.net/Tropicalista/n8r4gpyb/5/

new Vue({
  el: '#app',
  data: {
    mode: 'range',
    formats: {
        input: ['YYYY-MM-DD'],
    },
    selectedDate: {
        start: new Date(2019, 8, 03),
      end: new Date()
        //start: '2019-09-03',
      //end: '2019-09-14'
    },
  }
})

Source

Tropicalista

Most helpful comment

Try this prop: :masks="{L: 'YYYY-MM-DD'}"

adamorlowskipoland on 18 Oct 2019

👍2

All 6 comments

Hi @Tropicalista ,
The formats prop was renamed to masks a few versions ago.

Let me know if that works for you.

nathanreyes on 20 Sep 2019

@nathanreyes It still doesn't work using masks.

I tried setting masks: ['yyyy-mm-dd'] but no effect.
Above fiddle with masks changes

Can you please provide some example anywhere in docs?

Also is there any option to save date in 1 format and to display in the input field in user friendly format?

bsienn on 27 Sep 2019

Ping @nathanreyes please see this, as I really want to use this datepicker

bsienn on 4 Oct 2019

Try this prop: :masks="{L: 'YYYY-MM-DD'}"

adamorlowskipoland on 18 Oct 2019

👍2

If anyone is stuck with this and still want to use this library for its date range capability, you can use computed props to format the dates. Just install dayjs npm install dayjs and mount it to the window to use it in any component window.dayjs = require('dayjs'); (it's only 3kb when gzipped) and then do the following:

computed: {
    formattedStartDate() {
            if (this.selectedDate.start) {
                return dayjs(this.selectedDate.start).format('YYYY-MM-DD');
           }
    }
}