added date inputfield

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html

@@ -54,6 +54,27 @@
           }
         </div>
       </div>
+      <div class="date headline">
+        <p>Due date<span class="red-dot">*</span></p>
+        <input
+          type="date"
+          id="date"
+          name="date"
+          #date="ngModel"
+          (input)="checkDateInput()"
+          placeholder="{{ taskDataEdit.date }}"
+          [(ngModel)]="taskDataEdit.date"
+          autocomplete="off"
+          required
+        />
+        <div class="error-msg">
+          @if (!date.valid && date.touched) {
+          <p>You must enter a date.</p>
+          } @if (dateInPast && date.valid) {
+          <p>The date must be in the future</p>
+          }
+        </div>
+      </div>
     </div>
   </form>
 </section>

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts

@@ -16,6 +16,8 @@ export class TaskEditOverlayComponent implements OnInit {
   @Input() overlayData: string = '';
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
+  dateInPast: boolean = false;
+
   taskDataEdit: Task = {
     title: '',
     description: '',
@@ -76,6 +78,17 @@ export class TaskEditOverlayComponent implements OnInit {
     this.taskDataEdit.subtasksDone = [];
   }
 
+  checkDateInput() {
+    const currentDateForm = this.taskDataEdit.date.replaceAll('-', '');
+    const currentDate = new Date()
+      .toISOString()
+      .split('T')[0]
+      .replaceAll('-', '');
+    currentDateForm < currentDate
+      ? (this.dateInPast = true)
+      : (this.dateInPast = false);
+  }
+
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
     }