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,17 +111,18 @@ 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
-                    ref={el => this.text = el}
-                    value={this.state.text}
-                    className={className}
-                    onChange={this.changeText}
-                    onKeyDown={this.changeTextCall}
-                    onBlur={this.changeTextCallBlur}
-                />
+                return <div className={`${clsPrefix} filter-wrap`}>
+                    <FormControl
+                        ref={el => this.text = el}
+                        value={this.state.text}
+                        className={className}
+                        onChange={this.changeText}
+                        onKeyDown={this.changeTextCall}
+                        onBlur={this.changeTextCallBlur}
+                    />
                     <FilterDropDown
                         locale={locale}
                         onSelectDropdown={onSelectDropdown}
@@ -147,38 +151,64 @@ class FilterType extends Component {
                     </FilterDropDown>
                 </div>
             case 'dropdown':
-                return <div className={`${clsPrefix} filter-wrap`}><Select
-                    {...this.props}
-                    value={this.state.selectValue}
-                    onChange={this.changeSelect}
-                /><FilterDropDown
-                    locale={locale}
-                    onSelectDropdown={onSelectDropdown}
-                    onClickClear={this.clearSelectValue}
-                    isShowCondition={filterDropdown}
-                    isShowClear={this.state.selectValue}
-                >
+                return <div className={`${clsPrefix} filter-wrap`}>
+                    <Select
+                        {...this.props}
+                        value={this.state.selectValue}
+                        onChange={this.changeSelect}
+                    /><FilterDropDown
+                        locale={locale}
+                        onSelectDropdown={onSelectDropdown}
+                        onClickClear={this.clearSelectValue}
+                        isShowCondition={filterDropdown}
+                        isShowClear={this.state.selectValue}
+                    >
                     </FilterDropDown></div>
             case 'date':
-                return <div className={`${clsPrefix} filter-wrap`}><DatePicker
-                    {...this.props}
-                    value={this.state.dateValue}
-                    onChange={this.changeDate}
-                    open={this.state.open}
-                />{filterDropdown == 'show' && <FilterDropDown
-                    locale={locale}
-                    onSelectDropdown={onSelectDropdown}
-                    onClickClear={this.clearDateValue}
-                    isShowCondition={filterDropdown}
-                    isShowClear={this.state.dateValue}
-                >
-                </FilterDropDown>}
+                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}
+                        onClickClear={this.clearDateValue}
+                        isShowCondition={filterDropdown}
+                        isShowClear={this.state.dateValue}
+                    >
+                    </FilterDropDown>}
                 </div>
             case 'bool':
-                return <div className={`${clsPrefix} filter-wrap`}><Switch
-                    className={className}
-                    onChange={onChange}
-                />
+                return <div className={`${clsPrefix} filter-wrap`}>
+                    <Switch
+                        className={className}
+                        onChange={onChange}
+                    />
                     {filterDropdown == 'show' && <FilterDropDown locale={locale}
                         onSelectDropdown={onSelectDropdown}
                     >

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 />;