Need a way to deal with number format in react admin. I tried to change the format with Record Context. But my calculation went wrong.
I need something like this
5000000000 --> 5,000,000,000
Thank you
You can use the functions - parse / format. "Transforming Input Value to/from Record":
https://marmelab.com/react-admin/Inputs.html#recipes
I have been using this function to format numbers:
export const formatDecimals = (figure) => {
return figure && figure.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
Related
Ok I hope this has a simple solution.
I am trying to make a validation with Vuelidate on a field to be different than an array of strings.
So - sending a single string is working: not(sameAs(() =>"hello"))
But trying to send an array or comma seperated values wont validate anymore :not(sameAs(() => ["hello", "helloo"])) or not(sameAs(() => "hello", "helloo")).
Hopefully someone can help me, Thanks!
Alright if anyone is interested -
I just created my own validator ->
usedTitles:['hello','helloo'];
const checkDuplicates = () => this.usedTitles.indexOf(this.val) === -1;
val.unique = checkDuplicates;
I faced a problem while trying to calculate between 2 different times.
I am using vue-moment, and i tried to calculate the time with diffs but with no success.
data() {
return {
date: moment('12-11-2019').format("DD-MM-YYYY"),
date2: moment('13-11-2019').format("DD-MM-YYYY"),
startTime: this.date.diff(this.date2)
what is the right way of using moment in data and methods?
P.S.
i want to calculate the hours also and parse it with the date in the same argument, but i couldnt do it right.
You should be able to make it work with a computed property no problem:
computed: {
startTime() {
return this.date.diff(this.date2);
}
}
Working example
I have been struggling to get a number input to format numbers using vuejs2.
Migrating some view logic from asp.net core 2 to vue and I was using this:
<input asp-for="Model.LoanAmount" value="#(Model.LoanAmount > 0 ? Model.LoanAmount.ToString("N2") : String.Empty)" >
but that required me to reload that view onchange of the input.
I need a way to format number inputs with US format and 2 decimal places, (1,000,000.21) but to display nothing when the model value is zero or empty.
vue-numeric does ALMOST everything, but fails for me when I try to use a placeholder.
<vue-numeric v-model="vm.loanAmount" seperator="," placeholder=" " :precision="2" ></vue-numeric>
I tried using a space for placeholder because it crashes when I use an empty string.
This example displays 0.00 if zero or empty is inputted. I tried playing with the output-type and empty-value props.
I'm not wedded to vue-numeric but it is handy because I don't know of a more convenient solution.
You can achieve the formatting by simply using a computed property with separate getter and setter without the need for other dependencies.
computed: {
formattedValue: {
get: function() {
return this.value;
},
set: function(newValue) {
if (newValue.length > 2) {
newValue = newValue.replace(".", "");
this.value =
newValue.substr(0, newValue.length - 2) +
"." +
newValue.substr(newValue.length - 2);
} else {
this.value = newValue;
}
}
}
}
https://codesandbox.io/s/p7j447k7wq
I only added the decimal separator as an example, you'll have to add the , thousand separator in the setter for your full functionality.
I'm pulling a JSONP date for different events and workshops from RegOnline, which gives me:
/DATE(1408545000000)/
I'm using Handlebars to list the different events, and I'm attempting to use MomentJS as a registerHelper. objs is the array of objects I'm pulling from RegOnline:
function bindEvents(objs) {
Handlebars.registerHelper('formatDate', function(objs){
return new Handlebars.SafeString(
moment(objs.StartDate).format("LL")
);
});
var eventHost = $("#eventHost").html();
var eventTpl = Handlebars.compile(eventHost);
$(".event-list").append(eventTpl(objs));
}
Here's my template:
<span class="timestamp">{{City}}, {{State}} - {{formatDate StartDate}}</span>
This gives me the current date, instead of the date of the event. What am I missing?
Figured it out! I didn't need to define objs.StartDate in the Moment line. Handlebars takes care of that for me, so I just needed to use objs.
i want to write a dojo code where upon a button click i want to read a .csv file and display the .csv file in a datagrid using Dojo. Can anyone please help me with this?
Your best try is to retrieve the data using the dojo/request/xhr module, with it you can retrieve an external CSV file. For example:
require(["dojo/request/xhr"], function(xhr) {
xhr.get("myfile.csv", {
handleAs: "text"
}).then(function(data) {
// Use data
});
});
Well, now you have the data as a string in your data parameter, what you now need to do is parse that string. The easiest way is to split your string on each enter, for example:
var lines = data.split(/\r?\n/);
The \r is optional (depends on the system you're using), but now you have each line seperated in an array element in lines. The next step is to retrieve each seperate value, for example by doing:
require(["dojo/_base/array"], function(array) {
/** Rest of code */
array.forEach(lines, function(line) {
var cells = line.split(',');
});
});
Then you have your data splitted by each comma. The next step is that you have to change it to a format that the dojox/grid/DataGrid can read. This means that you will probably convert the first line of your CSV content to your headers (if they contain headers) and the rest of the data to objects (in stead of arrays of strings).
You can get the first line with:
var headers = lines[0].split(',');
And the rest of the data with:
var otherData = lines.splice(1);
Now you should carefully read the documentation #MiBrock gave you, and with it you can transform the simple array of strings to the correct format.
The headers should become an array of objects like this:
[{ name: "display name", field: "field name" }, { /** other objects */ }]
I did that by doing:
array.map(headers, function(header) {
return {
field: header,
name: header
};
});
This will actually convert [ "a", "b" ] to:
[{ field: "a", name: "a" }, { field: "b", name: "b" }]
Now you need to convert all other lines to objects containing a field with name a and a field with name b, you can do that using:
array.map(otherData, function(line) {
var cells = line.split(','), obj = {};
array.forEach(cells, function(cell, idx) {
obj[headers[idx]] = cell;
});
return obj:
});
This will actually retrieve the fieldname by retrieving the corresponding header value and output it as a single object.
Now you can put it in a grid, look at #MiBrock's answer for more details about how to do that. The final result would look a bit like this JSFiddle.
Note: Next time you encounter a problem you can't solve, handle the parts you actually can solve first and then ask a question about the other parts. I mean, it's hard to believe that you can actually not solve any of this by yourself. You should try and learn it by yourself first.
The dojo-smore project includes a CSV object store that loads data from CSV into an in-memory store which can then be used with any component that supports object stores, like dgrid. You shouldn’t try to do it yourself, like Dimitri M suggested, and you shouldn’t use the dojox grids, which are deprecated.
You can use dojox.data.CsvStore to read a CSV store and use it in a data grid.
Have a look here : http://dojotoolkit.org/reference-guide/1.8/dojox/grid/index.html#dojox-grid-index
and here: http://dojotoolkit.org/documentation/tutorials/1.9/populating_datagrid/
This should help you to start with your Programming.
If you need further help, show us what you have tried to solve the Problem by posting your code and we'll be glad to help you.
Regards, Miriam