Vue3 v-model value mask/formatting (german number format) - vue.js

I have a simple vue component which has has an input and the related v-model.
What we want is to format/mask the value, the input should have the german number format (, and . switched (From 1,000,000.00 to 1.000.000,00). The (raw) value inside the component on the other side should have the raw (englisch format) value 1,000,000.00.
Or short: I need an input which shows the german number format, the raw value still should have the english format.
Thanks in advance
I already tried it with maska which shows the value correctly on the frontend, but the raw value is just an int instead of a float.
I also tried to use vue-number-format, but i always get Vue is not defined in the console.
I also searched on stackoverflow and found a few (older) workarounds with the focus and blur event, but this seems like a dirty implementation for me.

Related

Masked input vuejs without jQuery

Can anybody ask datepicker plugin, that can be available to input some date or choose a date from the calendar (without jQuery)? Entered value must be masked
It looks like this datepicker accepts a "format" argument, which is a mask. If the format doesn't work the way you need it to, you could probably write a directive to add a mask to the input element.

Aurelia Value Converter Buggy Behavior with percentage

I am trying to convert a user input to a percentage using aurelia converter and Numeral.js.
Here is the gist: https://gist.run/?id=5bbfa902b1d14bff6f506dfcf2045370
The conversion is buggy. Basically, when I am entering the number, it does not behave as expected. Sometimes, I am not able to enter the value, and sometimes it just enters wrong value. The behavior is random.
I am not sure if the error is caused by value converter trying to convert the number at the same time I am typing. Is there a workaround?
It's trying to update on every key stroke. You want it to update after leaving the input. Try using value.bind="score | numberFormat & updateTrigger:'blur'" instead.
You can learn more about binding behaviors in the Aurelia docs.

extract value from hidden input using xpath and input.io

I want to extract a list of dates from a hidden input, but I really don't understand what I'm doing. On the web page there's code similar to:
I'm trying the xpath:
//input[#id="dates_list"]/#value
But that leaves my HTML column empty in import.io. (At least I have a blue underline on my xpath, instead of red, so I think I have the syntax correct.)
Based on the code
//input[#id="dates_list"]/#value
is not targeting your example , it should be like this
//input[#id="showtime_dates_list"]/#value
also in this case the column type Should be Text , if you need the html you should make it like this
//input[#id="showtime_dates_list"]

Apostrophe is converting as '

I have a table in which there is a column of type long.
In this column, we have stored the email responses. Now the problem which i am facing while querying business component which is on this table, is that the character ' is automatically getting converted to '
As shown in example below:
Value in column:
We've noticed some unusual usage on your phone.
Value coming while querying the Business Component:
We've noticed some unusual usage on your phone.
Although if i query in database directly, i am able to see ' correctly.
Can anyone suggest how this is happening ?
Thanks
The above link is related to Siebel.
So i will place my answer w.r.t Siebel. There is templates for communicating users in CRM.
Now if you do not mark HTML Template, then it will not convert the content of the body in UTF-8 format.
Since the HTML Type was unmarked in your case, speical character was not getting converted.
Mark it and your problem will be solved.
The template from which this field was picking up the value, we not in HTML Template format. For handling special characters like ', this property need to be marked.
Detailed info here : ExternalLink

How to format numeric field using dutch format in extjs?

i want to format number entered by user in dutch format. ie. use decimal Separator as , and thousand seperator as .
blur: function () {
Ext.util.Format.number(this.value, '000,000.00')
}
I want to format my numeric field on blur, the above code works fine, but
my requirement is to get a format like this- '000000.000,00'.
How to do this in extjs?
Quick and dirty, just set the thousandSeparator and decimalSeparator. It should work:
//Set these once, right after Ext.onReady
Ext.util.Format.thousandSeparator = '.';
Ext.util.Format.decimalSeparator = ',';
//Then this should work:
Ext.util.Format.number(12345.67, '0,000.00'); //output 12.345,67
Or even better, use the localization, so formats can be changed according to language requirement.
Side note:
The documentation wrote:
To allow specification of the formatting string using UK/US grouping characters (,) and decimal (.) for international numbers, add /i to the end. For example: 0.000,00/i
And from the comments in the source code
// The "/i" suffix allows caller to use a locale-specific formatting string.
// Clean the format string by removing all but numerals and the decimal separator.
// Then split the format string into pre and post decimal segments according to *what* the
// decimal separator is. If they are specifying "/i", they are using the local convention in the format string.
To me, it seems that it means a developer can use a specific format string "0.000,00" to format a given number, and not to mean a developer can use this specific format string to format a number into the format they want. They will still need to change the default separator setting.
Edit
Demo link: http://jsfiddle.net/chaoszcat/nbWwN/
I have this working for user entered values in a numberfield now.
As lionel pointed out, this is needed:
// set this once after Ext.onReady
Ext.util.Format.thousandSeparator = '.';
Ext.util.Format.decimalSeparator = ',';
Then change your handler to this:
blur: function(field) {
field.setRawValue(Ext.util.Format.number(field.getValue(), '0.000,00/i'));
}
You should also include this config on your numberfield:
decimalSeperator: ','
It will allow users to type in their own decimal symbols.
Working Example
Here is a working fiddle of this, using a numberfield.
A word of warning
Ext.form.field.Number does not support formatting, the blur handler I gave above will work totally fine if the user edits the field and then does not go back into it to edit it again, if he refocuses the field it will validate and try to correct the thousands markers into decimals.
If you are using this field to post data back to the server it will send it back in the format that is displayed (with thousand seperators), I don't know if that was what you were going for.
If you simply want formatted numbers you should do what you're trying to do above but with a textfield. That way it won't reconfigure your thousands as decimals.
If you want all the functionality of a numberfield (spinners, min/max validation, step increments, etc) you will have to take a look at extending the numberfield class, here is a user extension that already exists and which is almost exactly what you needed, but it includes a currency symbol, it would fairly easy to take that out.