完成了任务创建窗口和时间选择窗口的交互

src/app/shared/datetime-picker-modal/datetime-picker-modal.component.ts

@@ -1,8 +1,15 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { IonDatetime, ModalController } from '@ionic/angular';
 import { ViewChild } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
 
 @Component({
+  standalone: true,
+  imports: [
+    IonicModule,
+    CommonModule
+  ],
   selector: 'app-datetime-picker-modal',
   template: `
     <ion-header>

src/app/shared/task-modal/task-modal.component.html

@@ -61,9 +61,9 @@
     <ion-item class="time-display ion-margin-vertical">
       <ion-label>时间</ion-label>
       <div slot="end" class="time-values">
-        <span>{{ task.dueDate }}</span>
+        <span (click)="openDateTimePicker()">{{ task.dueDate }}</span>
         <span class="time-separator">|</span>
-        <span>{{ task.dueTime }}</span>
+        <span (click)="openDateTimePicker()">{{ task.dueTime }}</span>
       </div>
     </ion-item>
 

src/app/shared/task-modal/task-modal.component.ts

@@ -3,13 +3,14 @@ import { IonicModule, ModalController } from '@ionic/angular';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { IonDatetime } from '@ionic/angular';
+import { DateTimePickerModal } from '../datetime-picker-modal/datetime-picker-modal.component';
 
 @Component({
   selector: 'app-task-modal',
   templateUrl: './task-modal.component.html',
   styleUrls: ['./task-modal.component.scss'],
   standalone: true,
-  imports: [IonicModule, CommonModule, FormsModule]
+  imports: [IonicModule, CommonModule, FormsModule, DateTimePickerModal]
 })
 export class TaskModalComponent {
   // 日期范围配置
@@ -56,4 +57,23 @@ export class TaskModalComponent {
     }
     this.modalCtrl.dismiss(this.task);
   }
+
+  async openDateTimePicker() {
+    const modal = await this.modalCtrl.create({
+      component: DateTimePickerModal,
+      componentProps: {
+        initialDate: new Date(this.task.dueDate + 'T' + this.task.dueTime)
+      }
+    });
+
+    modal.onDidDismiss().then(({ data }) => {
+      if (data?.role === 'confirm') {
+        const selectedDate = data.data as Date;
+        this.task.dueDate = selectedDate.toISOString().split('T')[0];
+        this.task.dueTime = selectedDate.toTimeString().substring(0,5);
+      }
+    });
+
+    await modal.present();
+  }
 }