如何使用 Ionic (Angular) 在一个对话框中设置开始时间、结束时间和持续时间

Question

在这里，我使用 ionic 软件开发了物理 activity 的移动应用程序。这里我添加了一些物理 activity 列表。因此，当我单击其中一个物理图像时，应该会显示一个对话框。因此对话框应包含开始时间、结束时间和持续时间。我试过了，它对我不起作用。谁能帮我解决这个问题？

代码：- ts.file

import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { NavController } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
 selector: 'app-phyisicalactivity',
 templateUrl: './phyisicalactivity.page.html',
 styleUrls: ['./phyisicalactivity.page.scss'],
  })
 export class PhyisicalactivityPage implements OnInit {
 dateTime;
 io: any
 constructor(public alertController: AlertController, public navCtrl: NavController) {}
  async walk() {
  const alert = await this.alertController.create({
  cssClass: 'my-custom-class',
  header: 'Activity Details',
  inputs: [
    {
      name: 'Start time',
      type: 'checkbox',
      label: 'Start time',
      value: 'value1',
      handler: () => {
        console.log('Checkbox 1 selected');
      },
      checked: true
    },

    {
      name: 'Stop time',
      type: 'checkbox',
      label: 'Stop time',
      value: 'value2',
      handler: () => {
        console.log('Checkbox 2 selected');
      }
    },
    {
      name: 'title',
      placeholder: 'Title',
    },
  ],
  buttons: [
    {
      text: 'Cancel',
      role: 'cancel',
      cssClass: 'secondary',
      handler: () => {
        console.log('Confirm Cancel');
      }
    }, {
      text: 'Ok',
      handler: () => {
        console.log('Confirm Ok');
      }
    }
  ]
});

await alert.present();
 }

 showPrompt() {
   this.alertController.create({
   cssClass: 'my-custom-class',
   header: 'Activity Details',
   inputs: [
    {
      name: 'title',
      placeholder: 'Title',
    },{
      name: 'password',
      placeholder: 'Password'
    },
  ],
  buttons: [
    {
      text: 'Cancel',
      handler: data => {
        console.log('Cancel clicked');
      }
    },
    {
      text: 'Save',
      handler: data => {
        console.log('Saved clicked');
        document.getElementById("isi").innerHTML = data.password;
      }
    }
  ]
}).then(res => {
  res.present();
});


 }

  ngOnInit() {
  setTimeout(() => {
  this.dateTime = new Date().toISOString();
   });
  }
 }

HTML:-

 <ion-grid>

  <ion-row>
  <ion-col size="4">
    <ion-button fill="clear" expand="full" color="light" (click)="walk()">
      <ion-img src="./assets/badminton.png"></ion-img>
    </ion-button>
    </ion-col><ion-grid>

根据 Nasam 的建议我尝试过的代码。

import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { NavController } from '@ionic/angular';
import { Router } from '@angular/router';

 @Component({
   selector: 'app-phyisicalactivity',
   templateUrl: './phyisicalactivity.page.html',
   styleUrls: ['./phyisicalactivity.page.scss'],
    })
   export class PhyisicalactivityPage implements OnInit {
    dateTime;
    startTime;
    stopTime;
    finalTimeDifference;
    io: any
  constructor(public alertController: AlertController, public navCtrl: 
NavController) {}
async walk() {
const alert = await this.alertController.create({
cssClass: 'my-custom-class',
header: 'Activity Details',
inputs: [
 {
   name: 'Start time',
   type: 'checkbox',
   label: 'Start time',
   value: 'value1',
   handler: () => {
     console.log('Checkbox 1 selected');
     this.startTime = new Date().getTime();
   },
   checked: true
 },

 {
   name: 'Stop time',
   type: 'checkbox',
   label: 'Stop time',
   value: 'value2',
   handler: () => {
     console.log('Checkbox 2 selected');
     this.stopTime = new Date().getTime();
   }
 },
 {
   name: 'title',
   placeholder: 'Title',
 },
  ],
  buttons: [
    {
   text: 'Cancel',
   role: 'cancel',
   cssClass: 'secondary',
   handler: () => {
     console.log('Confirm Cancel');
   }
 }, {
   text: 'Ok',
   handler: () => {
     console.log('Confirm Ok');
     this.finalTimeDifference = this.stopTime - this.startTime; // calculate time difference on Okay click.
     console.log(this.finalTimeDifference);
   }
 }
    ]
    });

  await alert.present();
   }
    ngOnInit() {
    setTimeout(() => {
    this.dateTime = new Date().toISOString();
   });
   }
    }

Answer 1

startTime;
stopTime;
finalTimeDifference;

 async walk() {
    const alert = await this.alertController.create({
        cssClass: 'my-custom-class',
        header: 'Activity Details',
        inputs: [
            {
                name: 'Start time',
                type: 'checkbox',
                label: 'Start time',
                value: 'value1',
                handler: () => {
                    console.log('Checkbox 1 selected');
                    this.startTime = new Date().getTime(); // get Start Time on start Selection

                },
                checked: true
            },

            {
                name: 'Stop time',
                type: 'checkbox',
                label: 'Stop time',
                value: 'value2',
                handler: () => {
                    console.log('Checkbox 2 selected');
                   this.stopTime = new Date().getTime(); // get Stop Time on stop selection
                }
            },
            {
                name: 'title',
                placeholder: 'Title',
            },
        ],
        buttons: [
            {
                text: 'Cancel',
                role: 'cancel',
                cssClass: 'secondary',
                handler: () => {
                    console.log('Confirm Cancel');
                }
            }, {
                text: 'Ok',
                handler: () => {
                    console.log('Confirm Ok');
                    this.finalTimeDifference = this.stopTime - this.startTime; // calculate time difference on Okay click.
                    console.log(this.finalTimeDifference);
                }
            }
        ]
    });

    await alert.present();
}

如何使用 Ionic (Angular) 在一个对话框中设置开始时间、结束时间和持续时间

How to set Strat time ,End time and the Time duration in one dialog Box using Ionic (Angular)

datetime

ionic-framework

angular