react如何制作日期选择

2026-01-24 12:30:46React

使用原生HTML日期选择器

React可以直接使用HTML5的<input type="date">实现简单的日期选择功能。这种方式无需额外依赖，适合基础需求。

import React, { useState } from 'react';

function DatePicker() {
  const [selectedDate, setSelectedDate] = useState('');

  return (
    <div>
      <label>选择日期：</label>
      <input
        type="date"
        value={selectedDate}
        onChange={(e) => setSelectedDate(e.target.value)}
      />
      <p>已选择：{selectedDate}</p>
    </div>
  );
}

export default DatePicker;

使用第三方库（如react-datepicker）

对于更复杂的日期选择需求（如范围选择、自定义样式），推荐使用react-datepicker库。需先安装依赖：

npm install react-datepicker

基础示例：

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

function CustomDatePicker() {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      dateFormat="yyyy-MM-dd"
      placeholderText="选择日期"
    />
  );
}

export default CustomDatePicker;

自定义日期选择组件

若需完全自定义UI，可以结合状态管理和日历逻辑实现。以下示例展示一个简化的自定义日期选择器：

import React, { useState } from 'react';

function CustomDatePicker() {
  const [date, setDate] = useState(new Date());
  const [showCalendar, setShowCalendar] = useState(false);

  const handleDateClick = (day) => {
    setDate(new Date(date.setDate(day)));
    setShowCalendar(false);
  };

  const renderCalendar = () => {
    const daysInMonth = new Date(
      date.getFullYear(),
      date.getMonth() + 1,
      0
    ).getDate();

    return (
      <div className="calendar">
        {Array.from({ length: daysInMonth }, (_, i) => i + 1).map((day) => (
          <button key={day} onClick={() => handleDateClick(day)}>
            {day}
          </button>
        ))}
      </div>
    );
  };

  return (
    <div>
      <input
        type="text"
        value={date.toLocaleDateString()}
        onClick={() => setShowCalendar(!showCalendar)}
        readOnly
      />
      {showCalendar && renderCalendar()}
    </div>
  );
}

export default CustomDatePicker;

日期范围选择

使用react-datepicker实现日期范围选择：

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

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

  return (
    <div>
      <DatePicker
        selectsStart
        selected={startDate}
        onChange={setStartDate}
        startDate={startDate}
        endDate={endDate}
        placeholderText="开始日期"
      />
      <DatePicker
        selectsEnd
        selected={endDate}
        onChange={setEndDate}
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
        placeholderText="结束日期"
      />
    </div>
  );
}

export default DateRangePicker;