Q-input with comma as decimal separator

Adagio

I’m searching for a way to switch the thousand and decimal separators. Like many other countries, in Denmark we are writing 1,25 instead of 1.25
Unfortunately it seems like Q-input only accepts dot as separator

In the documentation for Q-input there is a part about using v-money, which might be useful, but I can’t get it working anywhere. When using the code I’m getting the error “Failed to resolve directive: money”
Obviously a reference is needed somewhere and somehow, but stupid me can’t find a way to do it

I have created a codepen here, but I’m not sure if a solution here would also work in my code

https://codepen.io/Adagio_B/pen/vYypEWo

On a side note it’s a bit weird to have to use something called money, when nothing I’ll use it for has anything to do with money

dobbel

@adagio

That error probably means that you have to add the directive to the directives list in quasar.conf.

or set in the same file:

 importStrategy: "auto"

See:
https://quasar.dev/start/how-to-use-vue#Using-Quasar-Directives

Mickey58

Isn’t this influenced by the language setting in quasar.conf? I have this:

framework: {
lang: “de”
}

Decimal numbers in q-inputs show up as “1,25”, not “1.25” for my Quasar app.

The corresponding v-model always has “1.25” though, which is needed by JS, as far as I understand it. This conversion seems to happen by the browser, Vue, or Quasar.

Adagio

@mickey58 @dobbel

I forgot to mention I’m using UMD/Standalone (bashes head on wall) and as far as I can see, I don’t have the same options of making changes to quasar.conf. I can only change the settings under framework.config, but not framework.lang

Adagio

I found another codepen, where it seems to work. I believe I might be able to convert this to my code

https://codepen.io/pdanpdan/pen/KKKrwbe?editors=1011

Mickey58

@Adagio - wow, that v-money Codepen looks pretty powerful. I have similar headaches with decimal numbers - though in my app those are not currencies, but geometrical heights.

But I still have to digest how I could make use of this v-money stuff. At a first glance, the code looks very different from my current code, as I don’t even see q-input fields in the Codepen. It wraps a native HTML input field (v-money directive) or a new component (v-money component) within a q-field, rather than using a q-input as usual for data entry. I never used q-field, but at a first glance it seems to have the same or nearly the same props a q-input, so the conversion is hopefully not too difficult.

What worries me a bit playing with that Codepen for v-money is this “right to left” data entry (same as “reverse fill mask” in Quasar). That could be found unusual by users. used to normal Quasar q-inputs without reverse fill mask. Do you know whether it can be changed?

Adagio

@mickey58 Haven’t seen any option to change that, sorry

I actually ended up using a third option, maybe you could be interested in this. The v-money codepen didn’t allow null-values, which I really need as in my case there’s a huge difference when a field has the value 0 compared to null. I’m also not using it for currencies

https://codepen.io/AnotherLinuxUser/pen/pWgOrZ

It was fairly easy to get working with q-field

<q-field>
<template v-slot:control>
                <vue-autonumeric class="q-field__native q-placeholder text-right test"
                                 :options="NumericSettings"
                                 v-model="localDataField">

                </vue-autonumeric>
</template>
</q-field>

Then in the data I have this settings object:

NumericSettings:
                {
                    negativeSignCharacter: "-",
                    decimalCharacter: ",",
                    digitGroupSeparator: "",
                    unformatOnHover: false,
                    selectOnFocus: false
                },

Hope this could help you a bit

Mickey58

@adagio - I took exactly the same route as you, I converted all my code from VMoney to VueAutoNumeric today.

The null handling of VMoney makes it unusable… My backend, like most apps, needs to distinguish null values from 0 numbers, while VMoney converts all null values to either 0 numbers or “0.0” decimal strings without explanation why and when. Very strange. I realized that VMoney issue too late and wasted 2 days struggling with it. I also realized VMoney is no longer maintained.

VueAutoumeric is so much better. The Quasar docs about third party mask processors which point to VMoney need an update to point to VueAutoNumeric instead.

No More Posting New Topics!

Q-input with comma as decimal separator