增加组件

HighStateComponent/DrawerWithFIlter/FilterIcon/index.js

+import styles from './index.less';
+import img from './筛选@3x.png'
+export default function FilterIcon({className, ...props}) {
+  return <span className={styles.filter + ' ' + className} {...props}></span>
+}

HighStateComponent/DrawerWithFIlter/FilterIcon/index.less

+.filter {
+  display: inline-block;
+  width: 0.36rem;
+  height: 0.36rem;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url('./筛选@3x.png');
+}

HighStateComponent/DrawerWithFIlter/index.js

 import React, { useState } from 'react';
 import { Drawer } from 'antd-mobile';
 import NavBarDiy from '../../baseComponents/NavBarDiy';
-import FilterMenu from '../../components/FilterMenu';
-import FilterIcon from '../../components/FilterIcon';
+import FilterMenu from '../../baseComponents/FilterMenu';
+import FilterIcon from './FilterIcon';
 
 const DrawerWithFIlter = ({ navBar: {rightContent, ...navBarRest}, drawer, children, filterMenu }) => {
   const [sidebarVisible, toggleSidebar] = useState(false);

baseComponents/DateRangePicker/CalendarIcon/index.js

+import styles from './index.less';
+
+export default function FilterIcon({className = '', ...props}) {
+  return <span className={styles.filter + ' ' + className} {...props}></span>
+}

baseComponents/DateRangePicker/CalendarIcon/index.less

+.filter {
+  display: inline-block;
+  width: 0.24rem;
+  height: 0.22rem;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url('./日历日期icon@3x.png');
+}

baseComponents/DateRangePicker/index.js

+import React from 'react';
+import { DatePicker, Flex } from 'antd-mobile';
+import styles from './index.less';
+import CalendarIcon from './CalendarIcon';
+import moment from 'moment';
+
+const CustomChildren = ({ extra, onClick, children, style }) => (
+  <div
+    onClick={onClick}
+    style={{ height: '45px', lineHeight: '45px', padding: '0 15px', ...style }}
+  >
+    {extra}
+  </div>
+);
+
+export default function DateRangePicker({ beginKey, endKey, values, onChange, mode='date', formatter='YYYY-MM-DD' }) {
+  return (
+    <Flex className={styles.container}>
+      <Flex.Item>
+        <DatePicker
+          mode={mode}
+          title="开始时间"
+          extra="开始时间"
+          value={values[beginKey] ? moment(values[beginKey]).toDate() : null}
+          onChange={date => onChange({ ...values, [beginKey]: moment(date).format(formatter) })}
+        >
+          <CustomChildren style={{ textAlign: 'right' }} />
+        </DatePicker>
+      </Flex.Item>
+      <Flex.Item style={{ flex: '0 0 auto' }}>至</Flex.Item>
+      <Flex.Item>
+        <Flex align='center'>
+          <DatePicker
+            mode={mode}
+            title="结束时间"
+            extra="结束时间"
+            value={values[endKey] ? moment(values[endKey]).toDate() : null}
+            onChange={date => onChange({ ...values, [endKey]: moment(date).format(formatter) })}
+          >
+            <CustomChildren style={{ textAlign: 'left' }} />
+          </DatePicker>
+          <CalendarIcon />
+        </Flex>
+      </Flex.Item>
+    </Flex>
+  );
+}

baseComponents/DateRangePicker/index.less

+.container {
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
+  margin: 0.15rem 0;
+}