推荐时间组件

如果你需要一个带有左侧快捷操作的范围日期选择组件，并且支持点击选择开始日期和结束日期，以下几个 React 组件库可能会适合你的需求：

1. `react-datepicker`

特点: 这个库支持范围选择功能，并且可以通过自定义的方式添加快捷操作。

使用方式:

你可以使用 react-datepicker 的 selectsRange 属性来启用日期范围选择。

使用 onChange 回调函数来设置开始日期和结束日期。

通过 calendarContainer 属性自定义面板关闭的逻辑。

示例代码:

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

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

  const handleChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
    if (start && end) {
      // 自动关闭面板逻辑可以在这里实现
    }
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={handleChange}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      inline
    />
  );
};

export default DateRangePicker;

2. `react-dates` (Airbnb)

特点: 由 Airbnb 开发的日期选择组件，支持日期范围选择，并且可以自定义面板的行为。

使用方式:

使用 DayPickerRangeController 组件来实现范围选择。

可以通过 onDatesChange 处理选择的日期。

使用 renderDay 属性自定义日期面板的行为。

示例代码:

import React, { useState } from 'react';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

const DateRangePickerComponent = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);

  const handleDatesChange = ({ startDate, endDate }) => {
    setStartDate(startDate);
    setEndDate(endDate);
    if (startDate && endDate) {
      // 自动关闭面板逻辑可以在这里实现
      setFocusedInput(null);
    }
  };

  return (
    <DateRangePicker
      startDate={startDate}
      startDateId="start_date_id"
      endDate={endDate}
      endDateId="end_date_id"
      onDatesChange={handleDatesChange}
      focusedInput={focusedInput}
      onFocusChange={focusedInput => setFocusedInput(focusedInput)}
      numberOfMonths={1}
    />
  );
};

export default DateRangePickerComponent;

3. `@mui/x-date-pickers` (Material-UI)

特点: Material-UI 提供的日期选择组件，支持日期范围选择，UI 风格统一。

使用方式:

使用 DateRangePicker 组件来实现范围选择。

通过 onChange 处理日期选择，设置自动关闭面板的逻辑。

示例代码:

import * as React from 'react';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

const DateRangePickerComponent = () => {
  const [value, setValue] = React.useState([null, null]);

  const handleChange = (newValue) => {
    setValue(newValue);
    if (newValue[0] && newValue[1]) {
      // 自动关闭面板逻辑可以在这里实现
    }
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateRangePicker
        startText="开始日期"
        endText="结束日期"
        value={value}
        onChange={handleChange}
        renderInput={(startProps, endProps) => (
          <>
            <TextField {...startProps} />
            <TextField {...endProps} />
          </>
        )}
      />
    </LocalizationProvider>
  );
};

export default DateRangePickerComponent;

这些组件库都可以满足你选择日期范围的需求，并且能够通过一些额外的逻辑实现面板的自动关闭。你可以根据自己的项目需求和风格选择合适的组件库进行使用。

1. `react-datepicker` 示例

代码:

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

const DateRangePickerDemo = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
    if (start && end) {
      setIsOpen(false); // 选择完成后自动关闭面板
    }
  };

  return (
    <div style={{ display: 'flex' }}>
      <div style={{ marginRight: '10px' }}>
        {/* 左侧快捷操作按钮 */}
        <button onClick={() => { /* 设置预设日期范围 */ }}>快速选择</button>
      </div>
      <DatePicker
        selected={startDate}
        onChange={handleChange}
        startDate={startDate}
        endDate={endDate}
        selectsRange
        inline
        open={isOpen}
        onClickOutside={() => setIsOpen(false)}
        onSelect={() => setIsOpen(false)}
      />
    </div>
  );
};

export default DateRangePickerDemo;

2. `react-dates` 示例

代码:

import React, { useState } from 'react';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

const DateRangePickerDemo = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [focusedInput, setFocusedInput] = useState(null);

  const handleDatesChange = ({ startDate, endDate }) => {
    setStartDate(startDate);
    setEndDate(endDate);
    if (startDate && endDate) {
      setFocusedInput(null); // 选择完成后自动关闭面板
    }
  };

  return (
    <div style={{ display: 'flex' }}>
      <div style={{ marginRight: '10px' }}>
        {/* 左侧快捷操作按钮 */}
        <button onClick={() => { /* 设置预设日期范围 */ }}>快速选择</button>
      </div>
      <DateRangePicker
        startDate={startDate}
        startDateId="start_date_id"
        endDate={endDate}
        endDateId="end_date_id"
        onDatesChange={handleDatesChange}
        focusedInput={focusedInput}
        onFocusChange={focusedInput => setFocusedInput(focusedInput)}
        numberOfMonths={1}
        isOutsideRange={() => false}
      />
    </div>
  );
};

export default DateRangePickerDemo;

3. `@mui/x-date-pickers` 示例

代码:

import React, { useState } from 'react';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import TextField from '@mui/material/TextField';

const DateRangePickerDemo = () => {
  const [value, setValue] = useState([null, null]);

  const handleChange = (newValue) => {
    setValue(newValue);
    if (newValue[0] && newValue[1]) {
      // 选择完成后自动关闭面板的逻辑
    }
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <div style={{ display: 'flex' }}>
        <div style={{ marginRight: '10px' }}>
          {/* 左侧快捷操作按钮 */}
          <button onClick={() => { /* 设置预设日期范围 */ }}>快速选择</button>
        </div>
        <DateRangePicker
          startText="开始日期"
          endText="结束日期"
          value={value}
          onChange={handleChange}
          renderInput={(startProps, endProps) => (
            <>
              <TextField {...startProps} />
              <TextField {...endProps} />
            </>
          )}
        />
      </div>
    </LocalizationProvider>
  );
};

export default DateRangePickerDemo;

这些示例展示了如何创建一个带有左侧快捷操作的日期范围选择器，并在选择日期后自动关闭面板。你可以根据实际需求调整左侧快捷操作按钮的功能和样式。