I need a currency amount input. Is there anyway to customize the InputNumber to support things like commas (',') or $?
Similar to these:
http://leonardowf.github.io/react-simple-currency/
https://github.com/jsillitoe/react-currency-input
I'm using form and InputNumber right now but it is hard to read (for the user) without at least the commas per thousand:
<Col span='24'>
<FormItem label='Original Investment'>
{getFieldDecorator('originalInvestment', {
rules: [{ required: true, message: 'Please input your Investment!' }],
initialValue: 100000000
})(
<InputNumber min={100000000} max={10000000000} />
)}
</FormItem>
</Col>
you can use the formatter property to achieve this
<InputNumber
defaultValue={1000}
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
parser={value => value.replace(/\$\s?|(,*)/g, '')}
onChange={onChange}
/>
check https://ant.design/components/input-number/#components-input-number-demo-formatter for more
It is not supported yet, you can trace https://github.com/ant-design/ant-design/issues/4681
Use this library. It's well maintained and it's well tested
https://github.com/s-yadav/react-number-format.
I tried quite a bit of libraries. This fixed my problem
Related
According to the documentation (first FAQ of Table documentation) I have the next code:
<Table
key={index + plant.name}
columns={setColumns(plant.name, plant.id)}
data={setData(plant)}
pagination={{ defaultPageSize: 10, hideOnSinglePage: true }}
/>
But it is still appearing the pagination:
Also I have tried all combinations as:
pagination={{false}}
pagination={false}
pagination={"false"}
But nothing runs properly. Could you help me please?
Currently to testing the maximum number of values are 4 into the table.
The config that I am using:
MacOS Version 10.15.6 (19G2021)
Ant Design Version ^4.5.4
React ^16.13.1
Thank you very much for your time!
You can try checking the length of data which is rendered in your list, If the data length exceeds perPageRecord than you can show.
pagination={data.length > perPageRecord && { defaultPageSize: 10, hideOnSinglePage: true }}
i check the antd portal found out , if want to disabled the display of pagination, need to control the position of the pagination.
position: ['none', 'none']
first one is top, second one is bottom
you can add more condition for display
for more detail: https://ant.design/components/table/
<Table column={yourColumn} dataSource={yourDataSource} pagination={{ position: ['none', 'none'] }}/>
Today we may use hideOnSinglePage option (FAQ):
<Table
columns={COLUMNS}
dataSource={data}
pagination={{ pageSize: PAGE_SIZE, hideOnSinglePage: true }}
/>
I am new to ant design. I want to validate a field to take only alphabets and special characters but not numbers. This is the approach I have used so far. I am using ant design 4.
<Form.Item
label="First Name"
name="first_name"
rules={[
{ required: true, message: REQUIRED_ERROR_MESSAGE },
{
pattern: new RegExp("/^[A-Z#~`!##$%^&*()_=+\\\\';:\"\\/?>.<,-]*$/i"),
message: "field does not accept numbers"
}
]}
>
<Input />
</Form.Item>
The above approach fails even if a user enters only letters. any help would be appreciated.
try removing the quotes that you currently have around your regular expression like this:
pattern: new RegExp(/^[a-zA-Z#~`!##$%^&*()_=+\\\\';:\"\\/?>.<,-]+$/i),
here's an example on codesandbox
So in my sapui5 view, the following returns a correct answer of 2:
<Text text="Test text 1: {= ${notif>CatToPhoto/}.length}"/>
This also returns a correct answer of 2:
<Text text="Test text 2: {= ${path: 'notif>CatToPhoto/'}.length}"/>
This, however, totally ignores the filtering and continues to return an answer of 2 when it should now return 1.
<Text text="Test text 3: {= ${path: 'notif>CatToPhoto/', filters: [{path: 'PhotoTypeKey', operator: 'EQ', value1: 2}]}.length}"/>
Does anybody know, please, is there a way to perform a filtering of the odata dataset that will allow me to get a count for elements with a certain value?
So I have found that I can achieve what I need to do through the use of a formatter.
An xml sample looks like this:
<Text text="Test text: {path: 'notif>CatToPhoto/', formatter: '.filterForOverview'}"></Text>
With a formatter function added to a .js file. For simplicity sake here, I've just added it to my Controller.js file, but I will be creating several of these, so I will segragate them out into a formatter.js file:
filterForOverview: function (photos) {
return photos.filter(photo => parseInt(photo.PhotoTypeKey) === 4).length;
},
By default, the tinymce input gets passed to the DOM as a paragraph tag:
I would like to remove that element wrapper so that tinymce passes exactly what I entered in the text editor.
How do I do that ? Please if you provide a code, can you also let me know where that code gets added ?
Regards !!!
Actually I solved my problem. All I had to do was change the styling for paragraph tag :
p {margin: 0; padding: 0;}
You need to specify the forced_root_block to false. However the documentation states that not having your root block as a <p> tag can cripple the editors behaviour. Newlines will be spaced with <br> tags instead.
tinyMCE.init({
selector: 'textarea',
forced_root_block: false
});
See the documentation here
I strip out those pesky things with gsub and regex like this:
<%= #event.desc_long.gsub(/^\<p\>/,"").gsub(/\<\/p\>$/,"") %>
First .gsub removes the <p> at the start of the TinyMCE string, and the second one removes the </p> at the end. Working great for me. This would work for any language that uses regex (gsub is for rails). JavaScript example:
var str = "{TinyMCE HTML string}";
str = str.replace(/^\<p\>/,"").replace(/\<\/p\>$/,"");
Hope this helps!
EDIT:
Re: where to put it. You leave what TinyMCE puts in your database alone. Add the above only when you display it (in the view, e-mail whatever).
In case you just want to get rid of margins:
tinymce.init({
...
setup: function(ed) {
ed.on('init', function() {
var doc = this.getDoc().getElementById("tinymce");
doc.style.margin = 0;
});
},
});
I'm working with no experience on a Dojo project and don't know which version I'm working on.
There is a textBox for a search form which doesn't accept whitespace. I searched in this documentation for a solution, but no method seems to be applicable. http://dojotoolkit.org/api/dijit/form/TextBox
So my question is: is it possible to accept whitespace in a textBox form or is it just possible with a ValidationTextBox?
me.filterBox = new TextBox({
style: 'margin-bottom: 0',
class: 'STQuicksearch',
trim: false,
intermediateChanges: true,
placeHolder: 'Quick search'
});
Edit:
There is no difference between setting trim false or true. But that's not my problem: I need to put whitespace between multiple words. Trim only removes leading and trailing whitespace!
If you look carefully in the documentation, you will find that the TextBox has a trim property, which removes leading and trailing whitespace if true. Setting this to false will hopefully give you the desired result.
Coded a working solution:
me.filterBox = new TextBox({
...
onKeyDown: function(e) {
if (e.keyCode === keys.SPACE) {
this.set('value', this.get('value')+' ');
}
}
});