当前位置：首页 > React

react如何做时间搜索框

2026-01-25 16:11:04React

实现时间搜索框的基本步骤

在React中实现时间搜索框通常需要结合日期选择库（如react-datepicker）和状态管理。以下是一个完整的实现示例：

安装依赖库：

npm install react-datepicker @types/react-datepicker

基本时间选择组件

创建一个可复用的时间选择组件：

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const TimeSearchBox = ({ onSearch }) => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleSearch = () => {
    if (startDate && endDate) {
      onSearch({
        start: startDate.toISOString(),
        end: endDate.toISOString()
      });
    }
  };

  return (
    <div className="time-search-container">
      <DatePicker
        selected={startDate}
        onChange={date => setStartDate(date)}
        selectsStart
        startDate={startDate}
        endDate={endDate}
        placeholderText="Start Date"
        dateFormat="yyyy-MM-dd"
      />
      <DatePicker
        selected={endDate}
        onChange={date => setEndDate(date)}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
        placeholderText="End Date"
        dateFormat="yyyy-MM-dd"
      />
      <button onClick={handleSearch}>Search</button>
    </div>
  );
};

高级功能实现

添加时间范围验证和预设选项：

const TimeSearchBox = ({ onSearch }) => {
  // ...之前的state

  const [error, setError] = useState('');

  const presetRanges = {
    'Today': [new Date(), new Date()],
    'This Week': [
      new Date(new Date().setDate(new Date().getDate() - new Date().getDay())),
      new Date()
    ],
    'Last 30 Days': [
      new Date(new Date().setDate(new Date().getDate() - 30)),
      new Date()
    ]
  };

  const handlePresetSelect = (range) => {
    setStartDate(range[0]);
    setEndDate(range[1]);
  };

  const validateDates = () => {
    if (!startDate || !endDate) {
      setError('Please select both dates');
      return false;
    }
    if (startDate > endDate) {
      setError('Start date cannot be after end date');
      return false;
    }
    setError('');
    return true;
  };

  const handleSearch = () => {
    if (validateDates()) {
      onSearch({
        start: startDate.toISOString(),
        end: endDate.toISOString()
      });
    }
  };

  return (
    <div>
      <div className="preset-ranges">
        {Object.entries(presetRanges).map(([label, range]) => (
          <button key={label} onClick={() => handlePresetSelect(range)}>
            {label}
          </button>
        ))}
      </div>
      {/* DatePicker组件 */}
      {error && <div className="error-message">{error}</div>}
    </div>
  );
};

样式优化

添加基础CSS样式：

.time-search-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.react-datepicker-wrapper {
  width: auto;
}

.preset-ranges {
  margin-bottom: 10px;
}

.preset-ranges button {
  margin-right: 5px;
  padding: 2px 5px;
}

.error-message {
  color: red;
  margin-top: 5px;
}

与父组件交互

在父组件中使用时间搜索框：

function App() {
  const handleTimeSearch = ({ start, end }) => {
    console.log('Searching from:', start, 'to:', end);
    // 这里可以添加API调用或其他搜索逻辑
  };

  return (
    <div>
      <h1>Data Report</h1>
      <TimeSearchBox onSearch={handleTimeSearch} />
    </div>
  );
}