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

Posted 2023-03-16

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

【英文标题】：How to set Strat time ,End time and the Time duration in one dialog Box using Ionic (Angular)

【发布时间】：2022-01-22 15:37:59

【问题描述】：

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

代码：- ts.文件

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();
   );
   
    

【问题讨论】：

您究竟想在图片点击上实现什么？我建议您使用moment.js 进行时间管理。

@NajamUsSaqib 其实我只是想在点击图片后添加时间。要添加开始时间和结束时间。然后自动应该是显示持续时间

为此，您必须在开始时间选择和停止时间选择上捕获时间，然后将它们进行比较。正如我建议您使用的时刻，您可以轻松地为时间加上字幕并做出改变。

【参考方案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();

【讨论】：

感谢您的回复。我试过你的代码。但这对我不起作用。什么都没有显示。在对话框中显示相同的显示。

我根据您的建议添加了修改。请仔细阅读此代码，如果需要进行更改，请告诉我。

检查这个堆栈闪电战：stackblitz.com/edit/ionic-angular-v5-ra2waw?file=src/app/…