Переглянути джерело

删除了时间选择功能,添加了时间选择组件

追梦人 6 місяців тому
батько
коміт
955fd45635

+ 52 - 0
src/app/shared/datetime-picker-modal/datetime-picker-modal.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input } from '@angular/core';
+import { IonDatetime, ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-datetime-picker-modal',
+  template: `
+    <ion-header>
+      <ion-toolbar color="light">
+        <ion-buttons slot="start">
+          <ion-button (click)="dismiss()">取消</ion-button>
+        </ion-buttons>
+        <ion-title>选择时间</ion-title>
+        <ion-buttons slot="end">
+          <ion-button (click)="confirm()" [strong]="true">确定</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-datetime
+        [value]="initialDate"
+        [min]="minDate"
+        [max]="maxDate"
+        presentation="date-time"
+      ></ion-datetime>
+    </ion-content>
+  `,
+  styles: [
+    `ion-datetime {
+      --background: white;
+      margin: 16px;
+      border-radius: 16px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    }`
+  ]
+})
+export class DateTimePickerModal {
+  @Input() initialDate!: string;
+  @Input() minDate?: string;
+  @Input() maxDate?: string;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  confirm() {
+    const value = document.querySelector('ion-datetime')?.value;
+    this.modalCtrl.dismiss(value);
+  }
+
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+}

+ 1 - 10
src/app/shared/task-modal/task-modal.component.html

@@ -57,16 +57,7 @@
     </div>
 
     <!-- 截止时间 -->
-    <ion-item
-      fill="outline"
-      class="ion-margin-vertical"
-      button
-      detail="false"
-      (click)="openDateTimePicker()"
-    >
-      <ion-label>截止时间</ion-label>
-      <ion-text slot="end">{{ task.dueDate | date: 'MM月dd日 HH:mm' }}</ion-text>
-    </ion-item>
+
 
     <!-- 日期选择器 -->
 

+ 1 - 28
src/app/shared/task-modal/task-modal.component.ts

@@ -13,19 +13,10 @@ import { IonDatetime } from '@ionic/angular';
 })
 export class TaskModalComponent {
   // 日期范围配置
-  dateConfig = {
-    min: new Date().toISOString(),
-    max: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString(),
-    buttons: {
-      doneText: '确定',
-      cancelText: '取消'
-    }
-  };
-
   task = {
     title: '',
     tags: [] as string[],
-    dueDate: new Date().toISOString(),
+
     subtasks: [''] as string[],
     note: ''  // 新增备注字段
   };
@@ -35,24 +26,6 @@ export class TaskModalComponent {
   constructor(private modalCtrl: ModalController) {}
 
   // 新增模态控制器实现
-  async openDateTimePicker() {
-    const datetimeModal = await this.modalCtrl.create({
-      component: IonDatetime,
-      componentProps: {
-        presentation: 'date-time',
-        value: this.task.dueDate,
-        min: this.dateConfig.min,
-        max: this.dateConfig.max
-      }
-    });
-
-    datetimeModal.onDidDismiss().then(({ data }) => {
-      if (data) this.task.dueDate = data;
-    });
-
-    await datetimeModal.present();
-  }
-
   addTag() {
     if (this.newTag) {
       this.task.tags.push(this.newTag.trim());