当前位置：首页 > React

react实现日期时间

2026-01-26 21:03:40React

实现日期时间选择器

使用 react-datepicker 库可以快速实现日期时间选择功能。该库提供了丰富的配置选项和样式支持。

安装依赖：

npm install react-datepicker date-fns

基本用法示例：

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

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

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
}

自定义日期时间格式

通过 dateFormat 属性可以自定义显示格式：

react实现日期时间

<DatePicker
  selected={startDate}
  onChange={date => setStartDate(date)}
  dateFormat="yyyy/MM/dd HH:mm"
  showTimeSelect
/>

日期范围选择

实现一个日期范围选择器：

const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(null);

<DatePicker
  selectsStart
  selected={startDate}
  onChange={date => setStartDate(date)}
  startDate={startDate}
  endDate={endDate}
/>
<DatePicker
  selectsEnd
  selected={endDate}
  onChange={date => setEndDate(date)}
  startDate={startDate}
  endDate={endDate}
  minDate={startDate}
/>

禁用特定日期

使用 filterDate 属性可以禁用某些日期：

react实现日期时间

const isWeekday = date => {
  const day = date.getDay();
  return day !== 0 && day !== 6;
};

<DatePicker
  filterDate={isWeekday}
  selected={startDate}
  onChange={date => setStartDate(date)}
/>

本地化设置

通过 locale 属性支持多语言：

import { registerLocale } from 'react-datepicker';
import zhCN from 'date-fns/locale/zh-CN';
registerLocale('zh-CN', zhCN);

<DatePicker
  locale="zh-CN"
  selected={startDate}
  onChange={date => setStartDate(date)}
/>

内联模式

让日期选择器始终显示：

<DatePicker
  inline
  selected={startDate}
  onChange={date => setStartDate(date)}
/>

纯时间选择

如果只需要时间选择功能：

<DatePicker
  selected={startDate}
  onChange={date => setStartDate(date)}
  showTimeSelect
  showTimeSelectOnly
  timeIntervals={15}
  dateFormat="h:mm aa"
/>

以上实现方案提供了从基础到高级的日期时间处理功能，可以根据实际需求选择合适的配置选项。react-datepicker 还支持自定义样式、日期禁用规则、多选日期等更多功能。