Блог

Главная - Вопросы по программированию - Определите, является ли дата субботой или воскресеньем, используя react

Определите, является ли дата субботой или воскресеньем, используя react

#reactjs #datepicker

#reactjs #datepicker

Вопрос:

Можем ли мы определить, является ли дата субботой или воскресеньем, используя 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;

Я хочу выделить дату, которая является субботой или воскресеньем.
Я очень новичок в react и не могу понять, как это сделать.

Комментарии:

1. Я бы посоветовал вам использовать для этого сторонний datepicker. Вы можете использовать github.com/airbnb/react-dates

Ответ №1:

Это не относится к react. Постройте дату из числа и получите ее день недели

 function isWorkDay(date, month = 10, year = 2020) {
  const weekDay = new Date(year, month, date).getDay()
  return  weekDay !== 0 amp;amp; weekDay !== 6; 
}
 
 function isWorkDay(date, month = 10, year = 2020) {
  const weekDay = new Date(year, month, date).getDay()
  return  weekDay !== 0 amp;amp; 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" />

Комментарии:

1. У меня просто есть одно небольшое сомнение. где в моем коде реакции я должен разместить function isWorkDay и function DateCell

2. Куда бы вы ни захотели. Я бы сохранил их конфиденциальными внутри файла. Или у вас может быть отдельный файл с утилями даты. Что бы это ни было, зависит от ваших требований.

3. не могли бы вы объяснить, как я могу сохранить эти данные в файле

4. Просто не экспортируйте их.

Метки: , ,