diff --git a/anwendung/src/components/DateElement.jsx b/anwendung/src/components/DateElement.jsx
new file mode 100644
index 0000000..55338fa
--- /dev/null
+++ b/anwendung/src/components/DateElement.jsx
@@ -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.week*7); //erhöht das Datum um 7 Tage für jede Woche, die weiter geklickt wurde.
+    endDate = addDays(startDate, 6);
+
+    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>
+        </>
+    );
+}