在反應中使用 datePicker 過濾 antd 表

Question

以下是 Ant 設計表的代碼，使用輸入字段過濾 object，但我希望它為 antd datepicker 字段而不是輸入字段轉換它，但不知道如何轉換它。

 const data = [ { key: '1', date: '2020-04-01', }, { key: '2', date: '2020-04-04', }, { key: '3', date: '2020-04-03', }, { key: '4', date: '2020-04-02', }, ]; class App extends React.Component { state = { searchText: '', searchedColumn: '', }; getColumnSearchProps = dataIndex => ({ filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( <div style={{ padding: 8 }}> <Input ref={node => { this.searchInput = node; }} placeholder={`Search ${dataIndex}`} value={selectedKeys[0]} onChange={e => setSelectedKeys(e.target.value? [e.target.value]: [])} onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)} style={{ width: 188, marginBottom: 8, display: 'block' }} /> <Button type="primary" onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)} icon={<SearchOutlined />} size="small" style={{ width: 90, marginRight: 8 }} > Search </Button> <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}> Reset </Button> </div> ), filterIcon: filtered => <SearchOutlined style={{ color: filtered? '#1890ff': undefined }} />, onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()), onFilterDropdownVisibleChange: visible => { if (visible) { setTimeout(() => this.searchInput.select()); } }, render: text => this.state.searchedColumn === dataIndex? ( <Highlighter highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }} searchWords={[this.state.searchText]} autoEscape textToHighlight={text.toString()} /> ): ( text ), }); handleSearch = (selectedKeys, confirm, dataIndex) => { confirm(); this.setState({ searchText: selectedKeys[0], searchedColumn: dataIndex, }); }; handleReset = clearFilters => { clearFilters(); this.setState({ searchText: '' }); }; render() { const columns = [ { title: 'Date', dataIndex: 'name', key: 'name', width: '30%', ...this.getColumnSearchProps('name'), }, ]; return <Table columns={columns} dataSource={data} />; } } ReactDOM.render(<App />, mountNode);

以下是 Ant 設計表的代碼，使用輸入字段過濾 object，但我希望它為 antd datepicker 字段而不是輸入字段轉換它，但不知道如何轉換它。

Answer 1

您可以使用類似這樣的東西來顯示 datePicker 而不是 searchInput。

 <div style={{ padding, width }}> <DatePicker.RangePicker autoFocus={autoFocus} onChange={handleChange} placeholder={placeholder} value={value} format={format} style={{ marginBottom: 8 }} /> <Button type="primary" role="search" onClick={handleSearch} style={{ width: btnWidth }} icon={<SearchOutlined />} size="small" > {label[0]} </Button> <Button role="reset" style={{ width: btnWidth, marginLeft }} onClick={handleClear} size="small" > {label[1]} </Button> </div>

Answer 2

老問題，但希望將來能幫助別人！

該代碼是來自表搜索過濾器的代碼，但您應該創建如下代碼：

// you need momentjs
import moment from "moment";
// the table data
import data from "../fakeData.js";

class myTable extends Component {

  constructor(props) {

    super(props);
    
    state = {
      data: data,
      filteredInfo: null,
      searchTimeText: null,
      searchedTimeColumn: null,
    };
  };
  
  clearFilters = () => {
    this.setState(
      { filteredInfo: null }
    );
  };

  handleTimeRangeSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    this.setState({
      searchTimeText: selectedKeys[0],
      searchedTimeColumn: dataIndex,
    });
  };

  handleTimeRangeReset = clearFilters => {
    clearFilters();
    this.setState({
      searchTimeRange: null,
      searchTimeRangeColumn: null,
    });
  };

  getColumnTimeProps = dataIndex => ({
    filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
      <div style={{ padding: 8 }}>
        <DatePicker.RangePicker
          onChange={e => {
            setSelectedKeys(e.length ? [e] : [])
          }}
          placeholder={["Start", "End"]}
          value={selectedKeys[0]}
          format="YYYY-MM-DD HH:mm:ss"
        />
        <Button
          type="primary"
          role="search"
          onClick={() => {
            this.handleTimeRangeSearch(selectedKeys, confirm, dataIndex)
          }}
          style={{ width: 90, marginRight: 8 }}
          icon={<SearchOutlined />}
          size="small"
        >
          Search
        </Button>
        <Button
          role="reset"
          style={{ width: 90 }}
          onClick={() => this.handleTimeRangeReset(clearFilters)}
          size="small"
        >
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <FieldTimeOutlined type="search" style={{ color: filtered ? "#1890ff" : undefined }} />
    ),
    onFilter: (value, record) => record[dataIndex] ? moment(record[dataIndex]).isBetween(moment(value[0]), moment(value[1])) : "",
    render: text => text
  });

render() {
  let {
    data,
    filteredInfo
  } = this.state;

  // table columns config
  const columns = [
  //...
  {
     title: 'Date',
     dataIndex: 'date',
     key: 'date',
     sorter: (a, b) => a.date > b.date,
     sortOrder: sortedInfo.columnKey === 'date' && sortedInfo.order,
     ...this.getColumnTimeProps('date'),
     filteredValue: filteredInfo.date || null,
  },
  //...
  ];

  // the table
  return (<Table dataSource={data} columns={columns} />)
  );
}