当前位置：首页 > React

react实现日期

2026-01-26 11:25:22React

React 实现日期的常见方法

使用 JavaScript 的 Date 对象
通过 JavaScript 内置的 Date 对象获取当前日期或处理特定日期，例如：

react实现日期

const currentDate = new Date();
const formattedDate = currentDate.toLocaleDateString();

使用第三方库（如 date-fns 或 moment.js）
对于更复杂的日期操作（如格式化、时区转换等），可以使用 date-fns 或 moment.js：

react实现日期

import { format } from 'date-fns';
const formattedDate = format(new Date(), 'yyyy-MM-dd');

在 React 组件中动态显示日期
在组件中通过 useState 和 useEffect 动态更新日期：

import React, { useState, useEffect } from 'react';

function DateDisplay() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setDate(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return <div>当前时间: {date.toLocaleTimeString()}</div>;
}

自定义日期选择器
使用 react-datepicker 等库实现交互式日期选择：

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

function CustomDatePicker() {
  const [selectedDate, setSelectedDate] = useState(null);
  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      dateFormat="yyyy-MM-dd"
    />
  );
}