Quasar: [v1] - QDate foreign format display and rules by lang

[labs20]

What did you get as the error?

Setting lang to "pt" on quasar.conf wont change neither the display mask to "dd/mm/yyyy" nor the rules to check the date on the QDate comp

What were you expecting?

Or having the internal mask and rule "date" to respect the lang defined, or having the old "format" prop back to be able to display dates on foreign formats.

[pdanpdan]

The date format in input field is set to YYYY/MM/DD for compatibility reasons.
See https://github.com/quasarframework/quasar/issues/3214

[labs20]

mmm... I think maybe its two related but different things here. My concern is about let the user type "30062018" and it gets masked as "30/06/2018" and the rule let it pass ok, as it stands for "30 of june of 2018" in certain foreign lang (pt-br among others).

[victorborgaco]

I have the same problem:
the Brazilian date display format is DD / MM / YYYY.
it was enough to put again according to the previous verses the _property_
format contained in QDatetime that will allow the manipulation of the display to the user and maintaining the original format in the model.

[oliviermorpa]

same problem. the display should be different depending on langage.

[nothingismagick]

There is a tentative workaround using computed: https://codepen.io/anon/pen/Jxmxae

    <q-input :value="formattedDate" >
      <q-popup-proxy>
        <q-date v-model="date" />
      </q-popup-proxy>
    </q-input>

  computed: {
    formattedDate(){
      return Quasar.utils.date.formatDate(this.date, 'MM.DD.YY')
    }

[natxocc]

is it not possible to custom format QDate component?

[labs20]

There is a tentative workaround using computed: https://codepen.io/anon/pen/Jxmxae

    <q-input :value="formattedDate" >
      <q-popup-proxy>
        <q-date v-model="date" />
      </q-popup-proxy>
    </q-input>

  computed: {
    formattedDate(){
      return Quasar.utils.date.formatDate(this.date, 'MM.DD.YY')
    }

Thanks for that! =]

But, unfortunately when on a dynamic form where you data is highly unpredictable this approach wont work very well.

[natxocc]

@labs20 I have the same case with dynamic form...

[robsoncombr]

+1 need format solution

[diegomagikal]

+1

[robsoncombr]

I have created a temporary work around to format DatePicker, currently it is using DD/MM/YYYY format but can be changed to any other. Hope it helps. https://github.com/controledigital/quasar-solutions/blob/master/components/cInputDate.vue

[Hamdan85]

+1

[MW-Code]

+1

[nothingismagick]

You all should check out Tobias App Extension:
https://github.com/TobyMosque/app-extension-datetimepicker

[diegomagikal]

I think that a simple way to do it is changing the input v-model to a computed property:

https://codepen.io/diegomagikal/pen/ZZrwxZ

[rafael1995]

+1

[nachodd]

I think that a simple way to do it is changing the input v-model to a computed property:

https://codepen.io/diegomagikal/pen/ZZrwxZ

This pen works, but you have to make your custom validation. I achieved this, but 'clearable' (or backspace) doesn't seem to be working,

https://codepen.io/nachodd/pen/ZZZOyz

Has anyone got a workaround on this? Thanks in advance!!!

I managed to solve it, changing v-model to :value and using a home-made 'clearable'. Hope it helps someone else!

[rstoenescu]

Optional mask and locale will be available in beta.24 for QDate.

[caitcif]

Does it mean that we no longer need to work around?
Ideally the q-input mask and validation can be set to follow the locale.
I am struggling to achieve that at the moment. Can someone please show an example with mask and locale?

[IgorDePaula]

Lang and Locale not work for pt-br.

[rstoenescu]

@IgorDePaula or you're not using them correctly. But you haven't given any details, so we can't help.