Created DateElement

2023-05-02 14:22:14 +02:00
parent 7867cf2a65
commit 55dcd50659
5 changed files with 47 additions and 14 deletions
@@ -25,6 +25,7 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
    <script src="../src/index.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
 .App {
  text-align: center;
 }
@@ -36,3 +40,18 @@
    transform: rotate(360deg);
  }
 }
 .container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
 }
 .dateElement {
  background-color: chartreuse;
  border-radius: 5px;
  border-width: 0px;
  width: 200px;
 }
@@ -1,23 +1,11 @@
 import logo from './logo.svg';
 import './App.css';
 import DateElement from './DateElement'
 function App() {
  return (
    <div className="App">
-      <header className="App-header">
+      <DateElement count={0} />
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
 }
@@ -0,0 +1,25 @@
 function addDays(date, days) {
    let result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
 }
 export default function DateElement(props){
    let startDate;
    let endDate;
    const currDate = new Date();
    startDate = addDays(currDate, (currDate.getDay()-1)*-1); //berechnet den Montag der aktuellen Woche
    startDate = addDays(startDate, props.count*7); //erhöht das Datum um 7 Tage für jede Woche, die weiter geklickt wurde.
    endDate = addDays(startDate, 7);
    const startDateString = `${startDate.getDate()}.${startDate.getMonth()+1}.${startDate.getFullYear()}`;
    const endDateString = `${endDate.getDate()}.${endDate.getMonth()+1}.${endDate.getFullYear()}`;
    return (
        <>
            <div className="container">
                <p className="dateElement">{startDateString} - {endDateString}</p>
            </div>
        </>
    );
 }