AIart-app/src/app/interest-search/interest-search.component.html

@@ -17,13 +17,21 @@
       <ion-label>一、基本情况</ion-label>
     </ion-item>
     <ion-item>
-      <ion-label position="floating">姓名</ion-label>
-      <ion-input [(ngModel)]="name"></ion-input>
+      <ion-input [(ngModel)]="name" label="姓名"></ion-input>
     </ion-item>
     <ion-item>
-      <ion-label position="floating">生日</ion-label>
-      <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="birthday"></ion-datetime>
+      <span style="margin-right: 50px;">生日</span>
+      <ion-datetime-button datetime="datetime"></ion-datetime-button>
+      <ion-modal [keepContentsMounted]="true">
+        <ng-template>
+          <ion-datetime id="datetime" presentation="date" (ionChange)="onDateTimeChange($event)"></ion-datetime>
+        </ng-template>
+      </ion-modal>
     </ion-item>
+    <!-- <ion-item>
+      <ion-label position="floating">生日</ion-label>
+      <ion-datetime [(ngModel)]="birthday"></ion-datetime>
+    </ion-item> -->
   </ion-list>
 
   <!-- 二、问卷问题 -->

AIart-app/src/app/interest-search/interest-search.component.ts

@@ -1,27 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import {
-  IonTextarea,
-  IonCheckbox,
-  IonList,
-  IonButton,
-  IonContent,
-  IonHeader,
-  IonInput,
-  IonTitle,
-  IonToolbar,
-  IonItem,
-  IonLabel,
-  IonRadioGroup,
-  IonRadio,
-  IonDatetimeButton,
-  IonDatetime,
-  IonModal,
-  IonAlert,
-  IonBackButton,
-  IonButtons
+  IonTextarea, IonCheckbox, IonList, IonButton, IonContent, IonHeader, IonInput, IonTitle,
+  IonToolbar, IonItem, IonLabel, IonRadioGroup, IonRadio, IonDatetimeButton, IonDatetime,
+  IonModal, IonAlert, IonBackButton, IonButtons,
 } from '@ionic/angular/standalone';
 import { CloudQuery, CloudObject, Pointer } from '../../lib/ncloud'; // 确保路径正确
-import { CommonModule } from '@angular/common'; // 导入 CommonModule
+import { CommonModule, DatePipe } from '@angular/common'; // 导入 CommonModule
 import { FormsModule } from '@angular/forms';   // 导入 FormsModule
 
 // 定义接口以确保类型安全
@@ -70,26 +54,10 @@ interface QuestionWithOptions extends Question {
   templateUrl: './interest-search.component.html',
   styleUrls: ['./interest-search.component.scss'],
   standalone: true,
-  imports: [
-    IonTextarea,
-    IonCheckbox,
-    IonList,
-    IonButton,
-    IonContent,
-    IonHeader,
-    IonInput,
-    IonTitle,
-    IonToolbar,
-    IonItem,
-    IonLabel,
-    IonRadioGroup,
-    IonRadio,
-    IonDatetimeButton,
-    IonDatetime,
-    IonModal,
-    CommonModule,
-    FormsModule,
-    IonDatetime, IonModal, IonAlert, IonBackButton, IonButtons,
+  imports: [IonTextarea, IonCheckbox, IonList, IonButton, IonContent, IonHeader, IonInput,
+    IonTitle, IonToolbar, IonItem, IonLabel, IonRadioGroup, IonRadio, IonDatetimeButton,
+    IonDatetime, IonModal, CommonModule, FormsModule, IonDatetime, IonModal, IonAlert,
+    IonBackButton, IonButtons,
   ]
 })
 export class InterestSearchComponent implements OnInit {
@@ -104,6 +72,14 @@ export class InterestSearchComponent implements OnInit {
 
   constructor() { }
 
+  // 定义方法，用于获取 <ion-datetime> 组件选择的值
+  onDateTimeChange(event: any) {
+    this.birthday = event.detail.value;
+    // // 使用DatePipe进行日期格式化，只保留年、月、日
+    // this.birthday = this.datePipe.transform(this.birthday, 'yyyy-MM-dd')!;
+    console.log('选择的日期为:', this.birthday);
+  }
+
   alertButtons = ['确定'];
 
   ngOnInit() {