[v1] QDate+QInput with manual mask wont work

[labs20]

Hi. I dont know what Im doing horribly wrong, but if I put any mask on “mask” prop I get the mask on the model instead of the date value when I select a date.

This works:

<template lang="pug">
    q-page.flex(ref="page_home")
        p Home 
        q-input(v-model="date")
            template(v-slot:append)
                q-icon.cursor-pointer(name="event" style="font-size: 1.2rem")
                    q-popup-proxy(ref="'pop_'" transition-show="scale" transition-hide="scale")
                        q-date(v-model="date")
     
</template>
<script>
export default {
    name: 'Home',
    data(){
        return {
            date: '2019/02/01'
        }
    }
}
</script>

But if I do this:

        q-input(v-model="date" mask="DD/MM/YYYY")

It turns out like this, after select a date:

Any help?

Thanks.

[labs20]

Versions:

  quasar - 1.0.0-rc.4 -- High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
  @quasar/app - 1.0.0-rc.6 -- Quasar Framework App CLI
  @quasar/extras - 1.1.3 -- Quasar Framework fonts, icons and animations
  vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.0.6 -- Official router for Vue.js 2
  vuex - 3.1.1 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.4.5 -- Babel compiler core.
  webpack - 4.32.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.3.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

[labs20]

Hmmmm… maybe the example on the docs: “With QInput” is not right.

On it, the mask prop is filled at the qinput, but the next example, “QDate and QTime with QInput” it is filled on the qdate itself.

I changed the mask prop to QDate and is working now.

Thanks

[metalsadman]

@labs20 it’s documented if you scroll down below this example https://quasar.dev/vue-components/date#Example--QDate-and-QTime-with-QInput, there are links for QInput’s mask & rules.

[labs20]

@metalsadman Thanks for your reply, I read the docs.

I just like to point out (as I did in my previous post) that there is an error at the docs, as in the example “With QInput” the mask is applied at the qinput and not in the qdate, and if one are only looking for a QDate and not for a QDateTime example, it could take a while to figure it out “what I could be doing wrong with a code copied from the docs itself”.

Thanks.

[metalsadman]

That’s not an error if you click those links and understood what those qinput mask and rules do. Although it’s kind of confusing at first, but it’s explained there, along with examples. It works per the example, it’s just you are expecting a different behavior out of it.

Here is an example of how you use that example when you want to customize it to your needs https://codepen.io/metalsadman/pen/JQRLbK?editors=1010.

https://quasar.dev/vue-components/date#Example--QDate-and-QTime-with-QInput The following are helpers for QInput mask and rules props. You can use these for convenience or write the string specifying your custom needs
You have to read the components api involve to thoroughly understand what was intended in those example, “with QInput” example is for usage when the user chose to type the date himself. I didn’t set the q-date’s mask so you’ll see what was its intent.

[adamlytics]

I’m just running into this problem as well. The codepen link does exactly what is happening with my environment as well. It’s fine that I change the mask on the q-input to “##/##/####”, but instead of it being something like “08/01/2019”, it comes across as “20/19/0801”, even though the mask of the q-date element is set to “MM/DD/YYYY”. Is there any way to do this?

[metalsadman]

@adamlytics as i said in my last comment I didn’t set the q-date’s mask so you’ll see what was its intent, that’s what you needed to set in the inner q-date mask="MM/DD/YYYY", here in action: https://codepen.io/metalsadman/pen/JQRLbK?editors=1010