q-input date - what am I missing?

[amoss]

I want a simple date input to show the format: YYYY-DD-MM (with dashes). I read around and did the following accordingly:

<q-input formatModel="string" format="YYYY-MM-DD" class="full-width" v-model="newTransactionWhen" rounded outlined type="date" stack-label label="When" :rules="[ val => val && val.length > 0 || 'When is missing']"/>

For some reason, it insists on showing it as mm/dd/yyyy. I read that dashes is a problem (why?) so I changed the format above to

format="YYYY/MM/DD"

but still it insists on mm/dd/yyyy. What am I doing wrong? Thanks

[s.molinari]

Where did you get format as a prop? It isn’t one.

mask is the prop you need.

https://codepen.io/smolinari/pen/WNbVbNB?editors=1010

Scott

[amoss]

mask does not work with type=“date”

<q-input mask="####-##-##" class="full-width" v-model="newTransactionWhen" rounded outlined type="date" stack-label label="When" :rules="[ val => val && val.length > 0 || 'When is missing']"/>

I saw format and formatModel here:
https://github.com/quasarframework/quasar/issues/2070#issuecomment-416501972

[metalsadman]

@amoss you should head to mdn docs as you are tapping into a native type date. Why not just use qdate with qinput? And btw you were looking into an issue that isnt relevant to v1, check the dates in that gh ticket.

[amoss]

The combination felt a bit cumbersome to me…
I saw the date of that ticket but I was hoping it just got better since, just like the whole quasar framework which is magnificent
So I understand it is not possible?
Thanks

[metalsadman]

@amoss like i said look into mdn docs, iirc they use preg match or etc. But ofc you have the power how the model will be shaped when you set it via date format utils, but as to displaying in a native manner, its a matter of creating a component of your own, so i dont see why not use qdate :/.

[amoss]

When clicking the icon to open qdate, it has no icon to close.
I know that clicking outside will close it but it looks less intuitive for the user. I think.
I know all can be fixed with my own layout, I just thought there is something out of the box.
Thanks

[metalsadman]

@amoss you can use default slot to make a set button of some sort, or use input event to close the qdate when user picks a date.

[amoss]

This post is deleted!

[amoss]