add:过滤行功能增加日期范围类型

demo/demolist/Demo27.js

@@ -182,7 +182,20 @@ class Demo27 extends Component {
           });
         }
       },
-      { title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "hide" },
+      {
+        title: "居住地址",
+        width: 350,
+        dataIndex: "address",
+        key: "address",
+        filterType: "daterange",
+        filterDropdown: "show"
+      },
+      {
+        title: "操作",
+        width: 100,
+        key: "other",
+        dataIndex: "other"
+      }
     ];
     return <ComplexTable
       onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()

src/FilterType.js

@@ -1,11 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import zhCN from "rc-calendar/lib/locale/zh_CN";
 import FormControl from 'bee-form-control';
 import Select from 'bee-select';
 import InputNumber from 'bee-input-number';
 import DatePicker from 'bee-datepicker';
 import FilterDropDown from './FilterDropDown';
 
+const { RangePicker } = DatePicker;
+
 const propTypes = {
     filterDropdown: PropTypes.string
 };
@@ -108,10 +111,11 @@ class FilterType extends Component {
      * @returns
      */
     renderControl = (rendertype) => {
-        let { filterDropdown, filterDropdownType, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
+        let { filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
         switch (rendertype) {
             case 'text':
-                return <div className={`${clsPrefix} filter-wrap`}><FormControl
+                return <div className={`${clsPrefix} filter-wrap`}>
+                    <FormControl
                         ref={el => this.text = el}
                         value={this.state.text}
                         className={className}
@@ -147,7 +151,8 @@ class FilterType extends Component {
                     </FilterDropDown>
                 </div>
             case 'dropdown':
-                return <div className={`${clsPrefix} filter-wrap`}><Select
+                return <div className={`${clsPrefix} filter-wrap`}>
+                    <Select
                         {...this.props}
                         value={this.state.selectValue}
                         onChange={this.changeSelect}
@@ -160,11 +165,35 @@ class FilterType extends Component {
                     >
                     </FilterDropDown></div>
             case 'date':
-                return <div className={`${clsPrefix} filter-wrap`}><DatePicker
+                return <div className={`${clsPrefix} filter-wrap`}>
+                    <DatePicker
                         {...this.props}
                         value={this.state.dateValue}
                         onChange={this.changeDate}
                         open={this.state.open}
+                        format={format}
+                        locale={zhCN}
+                    />{filterDropdown == 'show' && <FilterDropDown
+                        locale={locale}
+                        onSelectDropdown={onSelectDropdown}
+                        onClickClear={this.clearDateValue}
+                        isShowCondition={filterDropdown}
+                        isShowClear={this.state.dateValue}
+                    >
+                    </FilterDropDown>}
+                </div>
+            case 'daterange':
+                return <div className={`${clsPrefix} filter-wrap`}>
+                    <RangePicker
+                        {...this.props}
+                        value={this.state.dateValue}
+                        onChange={this.changeDate}
+                        open={this.state.open}
+                        format={format}
+                        locale={zhCN}
+                        placeholder={'开始 ~ 结束'}
+                        dateInputPlaceholder={['开始', '结束']}
+                        showClear={true}
                     />{filterDropdown == 'show' && <FilterDropDown
                         locale={locale}
                         onSelectDropdown={onSelectDropdown}
@@ -175,7 +204,8 @@ class FilterType extends Component {
                     </FilterDropDown>}
                 </div>
             case 'bool':
-                return <div className={`${clsPrefix} filter-wrap`}><Switch
+                return <div className={`${clsPrefix} filter-wrap`}>
+                    <Switch
                         className={className}
                         onChange={onChange}
                     />

src/TableHeader.js

@@ -417,6 +417,24 @@ class TableHeader extends Component {
             filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
           />
         );
+      //日期范围
+      case "daterange":
+        return (
+          <FilterType
+            locale={locale}
+            rendertype={type}
+            className={`filter-date`}
+            onClick={() => {}}
+            format={rows[1][index]["format"] || "YYYY-MM-DD"}
+            onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
+            onSelectDropdown={this.handlerFilterDropChange.bind(
+              this,
+              dataIndex
+            )}
+            filterDropdown={rows[1][index]["filterdropdown"]}
+            filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
+          />
+        );
       default:
         //不匹配类型默认文本输入
         return <div />;