docs: update docs for InputNumber, close: #5683

components/input-number/__tests__/__snapshots__/demo.test.js.snap

@@ -48,7 +48,7 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
     class="ant-input-number-handler-wrap"
   >
     <span
-      class="ant-input-number-handler ant-input-number-handler-up "
+      class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
       unselectable="unselectable"
     >
       <span
@@ -170,7 +170,7 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
         class="ant-input-number-input"
         max="Infinity"
         min="-Infinity"
-        value="$ 100"
+        value="$ 1,000"
       />
     </div>
   </div>
@@ -181,7 +181,7 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
       class="ant-input-number-handler-wrap"
     >
       <span
-        class="ant-input-number-handler ant-input-number-handler-up "
+        class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
         unselectable="unselectable"
       >
         <span
@@ -205,8 +205,8 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
       <input
         autocomplete="off"
         class="ant-input-number-input"
-        max="Infinity"
-        min="-Infinity"
+        max="100"
+        min="0"
         value="100%"
       />
     </div>

components/input-number/demo/formatter.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-展示具有具体含义的数据。
+通过 `formatter` 格式化数字，以展示具有具体含义的数据，往往需要配合 `parser` 一起使用。
 
 ## en-US
 
-Display value within it's situation.
+Display value within it's situation with `formatter`, and we usually use `parser` at the same time.
 
 ````jsx
 import { InputNumber } from 'antd';
@@ -22,8 +22,20 @@ function onChange(value) {
 
 ReactDOM.render(
   <div>
-    <InputNumber formatter={value => `$ ${value}`} defaultValue={100} onChange={onChange} />
-    <InputNumber formatter={value => `${value.replace('%', '')}%`} defaultValue={100} onChange={onChange} />
+    <InputNumber
+      defaultValue={1000}
+      formatter={value => `$ ${value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`}
+      parser={value => value.replace(/\$\s?|(,*)/g, '')}
+      onChange={onChange}
+    />
+    <InputNumber
+      defaultValue={100}
+      min={0}
+      max={100}
+      formatter={value => `${value}%`}
+      parser={value => value.replace('%', '')}
+      onChange={onChange}
+    />
   </div>
 , mountNode);
 ````

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -294,7 +294,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
         class="ant-input-number-handler-wrap"
       >
         <span
-          class="ant-input-number-handler ant-input-number-handler-up "
+          class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
           unselectable="unselectable"
         >
           <span
@@ -303,7 +303,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
           />
         </span>
         <span
-          class="ant-input-number-handler ant-input-number-handler-down "
+          class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
           unselectable="unselectable"
         >
           <span