用React 写一个日历控件
时间: 2023-12-29 17:15:20 浏览: 31
好的,以下是一个简单的React日历组件的示例代码:
```jsx
import React, { useState } from 'react';
// 获取当前月份的天数
function getDaysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
}
// 获取当前月份的第一天是星期几
function getFirstDayOfMonth(year, month) {
return new Date(year, month, 1).getDay();
}
function Calendar() {
const [date, setDate] = useState(new Date());
const year = date.getFullYear();
const month = date.getMonth();
const daysInMonth = getDaysInMonth(year, month);
const firstDayOfMonth = getFirstDayOfMonth(year, month);
// 生成日期数组
const dates = [];
for (let i = 1; i <= daysInMonth; i++) {
dates.push(i);
}
return (
<div>
<h2>{year}年{month + 1}月</h2>
<table>
<thead>
<tr>
<th>周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
</tr>
</thead>
<tbody>
{[...Array(Math.ceil((daysInMonth + firstDayOfMonth) / 7))].map((_, weekIndex) => (
<tr key={weekIndex}>
{[...Array(7)].map((_, dayIndex) => {
const date = weekIndex * 7 + dayIndex + 1 - firstDayOfMonth;
return (
<td key={dayIndex}>
{date > 0 && date <= daysInMonth ? date : ''}
</td>
);
})}
</tr>
))}
</tbody>
</table>
</div>
);
}
export default Calendar;
```
这个日历组件包含一个`Calendar`组件,使用了React的`useState`钩子来管理日期的状态。组件中还定义了两个辅助函数`getDaysInMonth`和`getFirstDayOfMonth`,分别用于获取当前月份的天数和第一天是星期几。
在`Calendar`组件中,首先计算出当前月份的天数和第一天是星期几,然后使用两个嵌套的`map`函数来生成日期表格。第一个`map`函数按照每周7天的方式来生成表格的每一行,第二个`map`函数按照每一天的方式来生成表格中的单元格,同时根据当前日期是否在当前月份范围内来显示或隐藏日期。最后将表格渲染到页面上。
这只是一个简单的示例代码,如果你需要更复杂的日历组件,可以根据需求进行相应的修改和扩展。