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.
I have some dynamic elements in my Shopify theme, for which I want to display prices in the correct currency and locale. There is Shopify's Shop.moneyFormat, which I can use, but the documentation doesn't say which values it can take. So far I encountered ${{amount}} or €{{amount_with_comma_separator}} but is the first symbol always the currency symbol or are there other variants as well?
Is it generally a good idea to get the currency from Shop.moneyFormat, the language from location.pathname and then use Intl.NumberFormat to format the string?
One hiccup we ran into with React Admin was around date fields for a table. We're just using the stock ra-data-json-server package. Our backend should be receiving a null value for an empty date, but it comes through as a blank string instead. What's the best approach for handling this?
Creating a custom DateInput component that yields null for an empty date.
Creating a custom data provider that would convert an empty string to null (not sure if it would have enough context to do this, though).
Something else I haven't thought of.
I'm not keen on doing the translation at the API end, since I'd like to keep the API clean and only allow for a valid date or a null value.
You can transform the input value using the parse / format functions:
https://marmelab.com/react-admin/Inputs.html#transforming-input-value-tofrom-record
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.
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.