Could not get date value

[fairking]

Because I am using a different format (en-GB), my value is not valid when parsing (new Date(myDate)).

Is there any way to get a date value, regardless what is the format (mask) is? Or to get the iso standard string, but display it in custom way?

Example:

const app = Vue.createApp({
    data() {
      return {
        myDate: new Date().toLocaleDateString("en-gb")
      }
    },
    methods: {
    	getDate() {
        alert('The date is ' + new Date(this.myDate))
      }
    }
  })

See the full working example here: https://jsfiddle.net/5so2pkct/1/

[fairking]

I am confused with the approach how the date picker works. Or maybe I don't understand something. I have read docs of course: https://quasar.dev/vue-components/date , and there is nothing about the format and it's examples, apart of mask property with short description.

I would expect this.mydate to be always in ISO format ('YYYY-MM-DDTHH:mm:ss.SSSZ') regardless of the mask.

[fairking]

Ok, so after reading few topics I have finally found the best approach to use date input with respect to the custom date format.

<template>
    <q-input borderless dense clearable filled v-model="myDate" label="Date" class="q-pl-md">
        <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                    <q-date minimal v-model="myDate" :mask="dateFormat">
                        <div class="row items-center justify-end">
                            <q-btn v-close-popup label="Close" color="primary" flat />
                        </div>
                    </q-date>
                </q-popup-proxy>
            </q-icon>
        </template>
    </q-input>
<template>

import { defineComponent } from 'vue'

const localeDateFormat = 'DD/MM/YYYY' // en-GB format as an example, any other format should work fine

export default defineComponent({
    data() {
      return {
        dateFormat: localeDateFormat,
        myDate: Quasar.date.formatDate(new Date(), localeDateFormat)
      }
    },
    methods: {
      getDate() {
      	const dateValue = Quasar.date.extractDate(this.myDate, localeDateFormat)
        alert('The date is ' + new Date(dateValue))
      }
    }
  })

See the example at work: https://jsfiddle.net/7jr0dcsw/

Related topics:
#3214
#3287

@rstoenescu It would be nice to include this or any other explanation in the documentation, so we can avoid such questions in future.