使用react确定日期是星期六还是星期天

Question

我们可以使用react来确定日期是周六还是周日吗。如果是，那么将如何实施？

我有一张桌子：

import React, { Component } from "react";
class HomePage extends Component {
render() {
return (
<div className="main">
<table>
<tr>
<th colSpan="7">Nov</th>
</tr>
<tr>
<th colSpan="7">Week 1</th>
</tr>
<tr>
<td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td>
</tr>
</table>
</div>
)
}
}
export default HomePage;

我想强调一下日期是星期六还是星期天。我是个新手，不知道该怎么做。

Answer 1

这不是特定于反应的。根据数字构造日期，并获取其星期日

function isWorkDay(date, month = 10, year = 2020) {
const weekDay = new Date(year, month, date).getDay()
return  weekDay !== 0 && weekDay !== 6; 
}

function isWorkDay(date, month = 10, year = 2020) {
const weekDay = new Date(year, month, date).getDay()
return  weekDay !== 0 && weekDay !== 6; 
}
function DateCell({date}) {
return <td className={isWorkDay(date) ? 'workday' : 'weekend'}>{date}</td>
}
class HomePage extends React.Component {
render() {
return (
<div className="main">
<table>
<tbody>
<tr>
<th colSpan="7">Nov</th>
</tr>
<tr>
<th colSpan="7">Week 1</th>
</tr>
<tr>
{
[16, 17, 18, 19, 20, 21, 22].map(date => <DateCell key={date} date={date} />)
}
</tr>
</tbody>
</table>
</div>
)
}
}
ReactDOM.render(<HomePage />, document.querySelector('#app'))

.weekend {
background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
<div id="app" />