qInput and qDate

amoss

Hi

I have the following code

<q-input rounded readonly v-model="dateWhen" :rules="['dateWhen']">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                    <q-date v-model="dateWhen" @input="() => $refs.qDateProxy.hide()" />
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>

dateWhen: "2020-01-31",

When the screen opens up, I do see the date in the format 2020-01-31 but after opening qDate and selecting a date, it becomes 2020/01/31, ‘-’ separator became ‘/’.

If I add a mask=‘dateWhen’ - it doesn’t work at all, meaning the date is not shown in qInput and when clicking the keyboard, the string ‘dateWhen’ shows up, instead of it’s value.

Why is that and how can I avoid it?
Thanks

amoss

I can’t edit so instead of the 2 last paragraphs, it should be:
In the docs I saw mask=‘dateWhen’ but then the date itself was missing and when clicking the keyboard (before it was readonly), the string ‘dateWhen’ showed up causing a mess in the input.

How can I make the format start and remain as 2020-01-31 (with ‘-’)?
Thanks

metalsadman

@amoss in your q-input add a mask like this mask="####-##-##", then on your q-date you’re desired date mask ie. mask="YYYY-MM-DD". rules in your q-input is for validation https://quasar.dev/vue-components/input#Validation and the list of helpers/(embedded validation rules) that you can use in it https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/patterns.js, from the link in that same section of the docs. so your :rules="['dateWhen'] does nothing(if not just breaks something) since it’s neither one of the rules nor a function that’s validating anything.

rules api docs:

Name
rules
Type
Array
Description
Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules

amoss

Thanks, now it works. I took my sample from the documentation of q-date so it might need to be updated. Just a thought.
Again, thank you very much!

metalsadman

@amoss said in qInput and qDate:

Thanks, now it works. I took my sample from the documentation of q-date so it might need to be updated. Just a thought.
Again, thank you very much!

Don’t need to update it, since the purpose of what you seen wasn’t the same, though if you have time you can add PR for an example like your usecase.

Anyway, here I updated one of my example, your usecase is the 2nd one https://codepen.io/metalsadman/pen/ZEbrjwB.

amoss

You are right but it can be misleading because the only difference is that I want it to be YYYY-MM-DD and in the example it’s YYYY/MM/DD

metalsadman

@amoss said in qInput and qDate:

You are right but it can be misleading because the only difference is that I want it to be YYYY-MM-DD and in the example it’s YYYY/MM/DD

It’s not if the purpose is different, like I said, you can PR for a different example in the docs.

No More Posting New Topics!

qInput and qDate