Browse Source

静态样式改为动态,时间选择窗口添加了output事件

追梦人 2 days ago
parent
commit
83275dfcb9

+ 9 - 2
src/app/shared/datetime-picker-modal/datetime-picker-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { IonDatetime, ModalController } from '@ionic/angular';
 import { ViewChild } from '@angular/core';
 
@@ -40,6 +40,8 @@ export class DateTimePickerModal {
   @Input() minDate?: string;
   @Input() maxDate?: string;
 
+@Output() confirmed = new EventEmitter<Date>();
+
   constructor(private modalCtrl: ModalController) {}
 
 // 导入 ViewChild
@@ -47,7 +49,12 @@ export class DateTimePickerModal {
 
   confirm() {
     if (!this.datetime.value) return;
-    this.modalCtrl.dismiss(this.datetime.value);
+    const selectedDate = new Date(this.datetime.value as string | Date);
+    this.confirmed.emit(selectedDate);
+    this.modalCtrl.dismiss({
+      data: selectedDate,
+      role: 'confirm'
+    });
   }
 
   dismiss() {

+ 2 - 2
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>2023-12-25</span>
+        <span>{{ task.dueDate }}</span>
         <span class="time-separator">|</span>
-        <span>14:30</span>
+        <span>{{ task.dueTime }}</span>
       </div>
     </ion-item>
 

+ 3 - 2
src/app/shared/task-modal/task-modal.component.ts

@@ -16,9 +16,10 @@ export class TaskModalComponent {
   task = {
     title: '',
     tags: [] as string[],
-
     subtasks: [''] as string[],
-    note: ''  // 新增备注字段
+    note: '',
+    dueDate: new Date().toISOString().split('T')[0],
+    dueTime: new Date(Date.now() + 3600000).toISOString().split('T')[1].substring(0,5)
   };
 
   newTag = '';