2
votes

Comment afficher l'heure au format HH: MM dans Ionic 3

Je reçois l'heure de l'API au format 13:45:56 et je veux l'afficher comme 13:45 (HH: MM). Quelqu'un peut-il m'aider? J'ai essayé d'utiliser le tuyau Date avec la balise de liaison, mais cela génère une erreur comme

 InvalidPipeArgument: '23:00:00' for pipe 'DatePipe'

angular ionic-framework ionic3

2 commentaires

'13: 45: 56 ', c'est au format chaîne, non?

oui, c'est au format chaîne

5 Réponses :

0
votes

HH - Heure, 24 heures, zéro non significatif 00 ... 23 h - Heure, 12 heures 1 ... 12 hh - Heure, 12 heures, zéro non significatif 01 ... 12

m - Minute 1 ... 59 mm - Minute, zéro non significatif 01 ... 59

Vous pouvez donc simplement écrire HH: mm

EX:

2 commentaires

Non, il ne s'affiche pas. Je viens de le fournir, mais il fonctionne comme une boîte de saisie {{bus.departureTime}}

Veuillez vérifier le lien stackblitz fourni dans la section réponse. Merci, appréciez vos efforts.

0
votes

Le DatePipe d'Angular attend une date selon la documentation :

.... un objet Date, un nombre (millisecondes depuis l'époque UTC) ou une chaîne ISO.

Vous devez donc convertir votre temps de l'API vers l'un de ceux-ci si vous souhaitez le formater via Angular.

Btw, n'est-il pas possible de supprimer simplement la deuxième partie de votre chaîne de temps que vous obtenez de l'API?

0 commentaires

1
votes

Vous pouvez également le lier de la manière suivante:

<span class="dt-time">{{ entity.created_at | utcTimeConversion: utcOffset : "MMM DD YYYY"}}</span>

Ici, je prends également en compte le décalage UTC à côté du format, cela garantirait que l'appareil mobile convertit l'heure comme selon le fuseau horaire de l'appareil ..

Cheers!

0 commentaires

0
votes

J'ai créé un stackblitz pour votre solution. Ce projet pourrait vous aider.

0 commentaires

2
votes

merci les gars pour vos précieux commentaires. Appréciant vos efforts. Je l'ai réparé en utilisant un tuyau. ce sera un peu complexe, mais vraiment utile pour une application dans plusieurs requêtes. Ajout d'une requête de canal ici avec

datepipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'datepipe' })
export class DateSet implements PipeTransform {
  transform(timeString: string ) {
    let time;
    time = timeString.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [timeString];
    if (time.length > 1) { // If time format correct
      time = time.slice (1);  // Remove full string match value
      time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
      time[3] = ' ';
      time[4] = ' ';
      time[0] = +time[0] % 12 || 12; // Adjust hours
    }
    return time.join ('');
  }
}

0 commentaires