🎬 update DatePicker and TimePicker demo

components/date-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker"
   >
@@ -41,8 +41,8 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -82,8 +82,8 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -123,8 +123,8 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -164,8 +164,8 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -205,12 +205,12 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker ant-picker-borderless"
   >
@@ -250,8 +250,8 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-borderless"
   >
@@ -291,8 +291,8 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-borderless"
   >
@@ -332,8 +332,8 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-borderless"
   >
@@ -373,8 +373,8 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range ant-picker-borderless"
   >
@@ -457,8 +457,8 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range ant-picker-borderless"
   >
@@ -541,8 +541,8 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range ant-picker-borderless"
   >
@@ -625,8 +625,8 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range ant-picker-borderless"
   >
@@ -709,12 +709,12 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker"
   >
@@ -754,7 +754,7 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -837,12 +837,12 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker ant-picker-disabled"
   >
@@ -883,8 +883,8 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-disabled"
   >
@@ -925,8 +925,8 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range ant-picker-disabled"
   >
@@ -1011,8 +1011,8 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -1120,12 +1120,12 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker"
   >
@@ -1165,8 +1165,8 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -1206,8 +1206,8 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -1290,7 +1290,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
         </svg>
       </span>
     </span>
-  </div>
+  </div>,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -1373,12 +1373,12 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
         </svg>
       </span>
     </span>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker"
   >
@@ -1418,8 +1418,8 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -1459,8 +1459,8 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -1543,8 +1543,8 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -1627,8 +1627,8 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -1668,12 +1668,12 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker"
   >
@@ -1737,8 +1737,8 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -1802,8 +1802,8 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -1867,8 +1867,8 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -1975,12 +1975,12 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker"
   >
@@ -2020,8 +2020,8 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -2104,12 +2104,12 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker ant-picker-range"
   >
@@ -2192,8 +2192,8 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -2276,12 +2276,12 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
         </svg>
       </span>
     </span>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker ant-picker-range"
   >
@@ -2364,8 +2364,8 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -2448,8 +2448,8 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -2532,8 +2532,8 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -2616,8 +2616,8 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -2700,8 +2700,8 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/select-in-range.md correctly 1`] = `
@@ -2791,7 +2791,7 @@ exports[`renders ./components/date-picker/demo/select-in-range.md correctly 1`]
 `;
 
 exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-radio-group ant-radio-group-outline"
   >
@@ -2853,9 +2853,9 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
         Small
       </span>
     </label>
-  </div>
-  <br />
-  <br />
+  </div>,
+  <br />,
+  <br />,
   <div
     class="ant-picker ant-picker-default"
   >
@@ -2895,8 +2895,8 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-default"
   >
@@ -2936,8 +2936,8 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range ant-picker-default"
   >
@@ -3020,8 +3020,8 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-default"
   >
@@ -3061,12 +3061,12 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker"
   >
@@ -3106,7 +3106,7 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-picker"
   >
@@ -3146,12 +3146,12 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker"
   >
@@ -3191,8 +3191,8 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -3232,8 +3232,8 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -3316,8 +3316,8 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -3357,8 +3357,8 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -3379,8 +3379,8 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
         ab
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -3401,8 +3401,8 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
         ab
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -3466,8 +3466,8 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
     >
       ab
     </span>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker"
   >
@@ -3488,12 +3488,12 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
         ab
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker"
   >
@@ -3533,8 +3533,8 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-picker ant-picker-range"
   >
@@ -3617,6 +3617,6 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-</div>
+  </div>,
+]
 `;

components/date-picker/demo/basic.md

@@ -21,7 +21,7 @@ function onChange(date, dateString) {
 }
 
 ReactDOM.render(
-  <div>
+  <>
     <DatePicker onChange={onChange} />
     <br />
     <DatePicker onChange={onChange} picker="week" />
@@ -31,7 +31,7 @@ ReactDOM.render(
     <DatePicker onChange={onChange} picker="quarter" />
     <br />
     <DatePicker onChange={onChange} picker="year" />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/bordered.md

@@ -19,7 +19,7 @@ import { DatePicker } from 'antd';
 const { RangePicker } = DatePicker;
 
 ReactDOM.render(
-  <div>
+  <>
     <DatePicker bordered={false} />
     <br />
     <DatePicker picker="week" bordered={false} />
@@ -35,7 +35,7 @@ ReactDOM.render(
     <RangePicker picker="month" bordered={false} />
     <br />
     <RangePicker picker="year" bordered={false} />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/date-render.md

@@ -19,7 +19,7 @@ import { DatePicker } from 'antd';
 const { RangePicker } = DatePicker;
 
 ReactDOM.render(
-  <div>
+  <>
     <DatePicker
       dateRender={current => {
         const style = {};
@@ -48,7 +48,7 @@ ReactDOM.render(
         );
       }}
     />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/disabled-date.md

@@ -56,7 +56,7 @@ function disabledRangeTime(_, type) {
 }
 
 ReactDOM.render(
-  <div>
+  <>
     <DatePicker
       format="YYYY-MM-DD HH:mm:ss"
       disabledDate={disabledDate}
@@ -76,7 +76,7 @@ ReactDOM.render(
       }}
       format="YYYY-MM-DD HH:mm:ss"
     />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/disabled.md

@@ -21,7 +21,7 @@ const { MonthPicker, RangePicker } = DatePicker;
 
 const dateFormat = 'YYYY-MM-DD';
 ReactDOM.render(
-  <div>
+  <>
     <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
     <br />
     <MonthPicker defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
@@ -35,7 +35,7 @@ ReactDOM.render(
       defaultValue={[moment('2019-09-03', dateFormat), moment('2019-11-22', dateFormat)]}
       disabled={[false, true]}
     />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/extra-footer.md

@@ -19,7 +19,7 @@ import { DatePicker } from 'antd';
 const { RangePicker } = DatePicker;
 
 ReactDOM.render(
-  <div>
+  <>
     <DatePicker renderExtraFooter={() => 'extra footer'} />
     <br />
     <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
@@ -29,7 +29,7 @@ ReactDOM.render(
     <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
     <br />
     <DatePicker renderExtraFooter={() => 'extra footer'} picker="month" />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/format.md

@@ -25,7 +25,7 @@ const monthFormat = 'YYYY/MM';
 const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
 
 ReactDOM.render(
-  <div>
+  <>
     <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
     <br />
     <DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
@@ -36,7 +36,7 @@ ReactDOM.render(
       defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
       format={dateFormat}
     />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/mode.md

@@ -77,11 +77,11 @@ class ControlledRangePicker extends React.Component {
 }
 
 ReactDOM.render(
-  <div>
+  <>
     <ControlledDatePicker />
     <br />
     <ControlledRangePicker />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/presetted-ranges.md

@@ -25,7 +25,7 @@ function onChange(dates, dateStrings) {
 }
 
 ReactDOM.render(
-  <div>
+  <>
     <RangePicker
       ranges={{
         Today: [moment(), moment()],
@@ -43,7 +43,7 @@ ReactDOM.render(
       format="YYYY/MM/DD HH:mm:ss"
       onChange={onChange}
     />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/range-picker.md

@@ -19,7 +19,7 @@ import { DatePicker } from 'antd';
 const { RangePicker } = DatePicker;
 
 ReactDOM.render(
-  <div>
+  <>
     <RangePicker />
     <br />
     <RangePicker showTime />
@@ -29,7 +29,7 @@ ReactDOM.render(
     <RangePicker picker="month" />
     <br />
     <RangePicker picker="year" />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/size.md

@@ -30,7 +30,7 @@ class PickerSizesDemo extends React.Component {
   render() {
     const { size } = this.state;
     return (
-      <div>
+      <>
         <Radio.Group value={size} onChange={this.handleSizeChange}>
           <Radio.Button value="large">Large</Radio.Button>
           <Radio.Button value="default">Default</Radio.Button>
@@ -45,7 +45,7 @@ class PickerSizesDemo extends React.Component {
         <RangePicker size={size} />
         <br />
         <DatePicker size={size} picker="week" />
-      </div>
+      </>
     );
   }
 }

components/date-picker/demo/start-end.md

@@ -73,7 +73,7 @@ class DateRange extends React.Component {
   render() {
     const { startValue, endValue, endOpen } = this.state;
     return (
-      <div>
+      <>
         <DatePicker
           disabledDate={this.disabledStartDate}
           showTime
@@ -93,7 +93,7 @@ class DateRange extends React.Component {
           open={endOpen}
           onOpenChange={this.handleEndOpenChange}
         />
-      </div>
+      </>
     );
   }
 }

components/date-picker/demo/suffix.md

@@ -26,7 +26,7 @@ function onChange(date, dateString) {
 }
 
 ReactDOM.render(
-  <div>
+  <>
     <DatePicker suffixIcon={smileIcon} onChange={onChange} />
     <br />
     <DatePicker suffixIcon={smileIcon} onChange={onChange} picker="month" />
@@ -42,7 +42,7 @@ ReactDOM.render(
     <RangePicker suffixIcon="ab" onChange={onChange} />
     <br />
     <DatePicker suffixIcon="ab" onChange={onChange} picker="week" />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/date-picker/demo/time.md

@@ -28,7 +28,7 @@ function onOk(value) {
 }
 
 ReactDOM.render(
-  <div>
+  <>
     <DatePicker showTime onChange={onChange} onOk={onOk} />
     <br />
     <RangePicker
@@ -37,7 +37,7 @@ ReactDOM.render(
       onChange={onChange}
       onOk={onOk}
     />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/time-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker"
   >
@@ -44,7 +44,7 @@ exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-picker"
     style="width:140px"
@@ -88,7 +88,7 @@ exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-picker"
   >
@@ -131,8 +131,8 @@ exports[`renders ./components/time-picker/demo/12hours.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/time-picker/demo/addon.md correctly 1`] = `
@@ -437,10 +437,9 @@ exports[`renders ./components/time-picker/demo/interval-options.md correctly 1`]
 `;
 
 exports[`renders ./components/time-picker/demo/range-picker.md correctly 1`] = `
-<div>
-  <div
+<div
   class="ant-picker ant-picker-range"
-  >
+>
   <div
     class="ant-picker-input ant-picker-input-active"
   >
@@ -523,12 +522,11 @@ exports[`renders ./components/time-picker/demo/range-picker.md correctly 1`] = `
       </svg>
     </span>
   </span>
-  </div>
 </div>
 `;
 
 exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-picker ant-picker-large"
   >
@@ -595,7 +593,7 @@ exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-picker"
   >
@@ -662,7 +660,7 @@ exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-picker ant-picker-small"
   >
@@ -729,8 +727,8 @@ exports[`renders ./components/time-picker/demo/size.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/time-picker/demo/suffix.md correctly 1`] = `

components/time-picker/demo/12hours.md

@@ -21,11 +21,11 @@ function onChange(time, timeString) {
 }
 
 ReactDOM.render(
-  <div>
+  <>
     <TimePicker use12Hours onChange={onChange} />
     <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} style={{ width: 140 }} />
     <TimePicker use12Hours format="h:mm a" onChange={onChange} />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/time-picker/demo/basic.md

@@ -22,7 +22,10 @@ function onChange(time, timeString) {
 }
 
 ReactDOM.render(
-  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
+  <TimePicker
+    onChange={onChange}
+    defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+  />,
   mountNode,
 );
 ```

components/time-picker/demo/disabled.md

@@ -17,5 +17,11 @@ A disabled state of the `TimePicker`.
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
-ReactDOM.render(<TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />, mountNode);
+ReactDOM.render(
+  <TimePicker
+    defaultValue={moment('12:08:23', 'HH:mm:ss')}
+    disabled
+  />,
+  mountNode,
+);
 ```

components/time-picker/demo/hide-column.md

@@ -19,5 +19,11 @@ import moment from 'moment';
 
 const format = 'HH:mm';
 
-ReactDOM.render(<TimePicker defaultValue={moment('12:08', format)} format={format} />, mountNode);
+ReactDOM.render(
+  <TimePicker
+    defaultValue={moment('12:08', format)}
+    format={format}
+  />,
+  mountNode,
+);
 ```

components/time-picker/demo/range-picker.md

@@ -18,10 +18,5 @@ import { TimePicker } from 'antd';
 
 const { RangePicker } = TimePicker;
 
-ReactDOM.render(
-  <div>
-    <RangePicker />
-  </div>,
-  mountNode,
-);
+ReactDOM.render(<RangePicker />, mountNode);
 ```

components/time-picker/demo/size.md

@@ -18,11 +18,11 @@ import { TimePicker } from 'antd';
 import moment from 'moment';
 
 ReactDOM.render(
-  <div>
+  <>
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/time-picker/demo/suffix.md

@@ -23,11 +23,9 @@ function onChange(time, timeString) {
   console.log(time, timeString);
 }
 
-const icon = <SmileOutlined />;
-
 ReactDOM.render(
   <TimePicker
-    suffixIcon={icon}
+    suffixIcon={<SmileOutlined />}
     onChange={onChange}
     defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
   />,

components/time-picker/demo/value.md

@@ -14,21 +14,17 @@ value 和 onChange 需要配合使用。
 `value` and `onChange` should be used together,
 
 ```jsx
+import React, { useState } from 'react';
 import { TimePicker } from 'antd';
 
-class Demo extends React.Component {
-  state = {
-    value: null,
-  };
+const Demo = () => {
+  const [value, setValue] = useState(null);
 
-  onChange = time => {
-    console.log(time);
-    this.setState({ value: time });
+  const onChange = time => {
+    setValue(time);
   };
 
-  render() {
-    return <TimePicker value={this.state.value} onChange={this.onChange} />;
-  }
+  return <TimePicker value={value} onChange={onChange} />;
 }
 
 ReactDOM.render(<Demo />, mountNode);