InputNumber for a currency input?

Question

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>

Answer 1

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