web-dev-qa-db-fra.com

Formatage Date/Heure dans TypeScript

J'ai eu du mal à obtenir un objet Date dans TypeScript pour formater comme je le souhaite. 

J'ai une classe Module qui est définie comme:

export class Module {

    constructor(public id: number, public name: string, public description: string, 
                 public lastUpdated: Date, public owner: string) { }

    getNiceLastUpdatedTime(): String {

        let options: Intl.DateTimeFormatOptions = {
            day: "numeric", month: "numeric", year: "numeric",
            hour: "2-digit", minute: "2-digit"
        };

        return this.lastUpdated.toLocaleDateString("en-GB", options) + " " + this.lastUpdated.toLocaleTimeString("en-GB", options);
    }
}

Quand j'appelle la méthode avec le code suivant:

    let date = new Date(1478708162000); // 09/11/2016 16:16pm (GMT)
    let module = new Module(1, "Test", "description", date, "test owner");
    console.log(module.getNiceLastUpdatedTime());

Je me retrouve avec ce qui suit imprimé dans la console:

'9 November 2016 16:16:02 GMT'

Ce que je veux voir c'est:

09/11/2015 16:16

J'ai consulté la documentation sur: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString et je ne vois toujours pas quoi Je me trompe (je sais qu'il s'agit d'une documentation sur l'API JavaScript, mais je suis presque sûr que c'est ce que TypeScript utilise sous le capot).

javascripttypescript
25
Matt Watson

Si vous voulez le délai d'attente ainsi que la date que vous voulez Date.toLocaleString().

C'était directement depuis ma console:

> new Date().toLocaleString()
> "11/10/2016, 11:49:36 AM"

Vous pouvez ensuite saisir les chaînes de paramètres régionaux et la chaîne de formatage pour obtenir le résultat précis souhaité.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

23
dougajmcdonald
  1. Vous pouvez créer un tuyau hérité de la base PipeTransform
  2. Puis implémentez la méthode de transformation

Utilisé dans Angular 4 - ça marche. Le meilleur moyen de formater une date est un tuyau.

Créez votre pipe personnalisé comme ceci:

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

@Pipe({
    name: 'dateFormat'
  })
  export class DateFormatPipe extends DatePipe implements PipeTransform {
    transform(value: any, args?: any): any {
       ///MMM/dd/yyyy 
       return super.transform(value, "MMM/dd/yyyy");
    }
  }

et il est utilisé dans une classe TypeScript comme ceci:

////my class////

export class MyComponent
{
  constructor(private _dateFormatPipe:DateFormatPipe)
  {
  }

  formatHereDate()
  {
     let myDate = this._dateFormatPipe.transform(new Date())//formatting current ///date here 
     //you can pass any date type variable 
  }
}
8
Kamalakar

Je vous suggère d'utiliser Moment JS

Avec le moment, vous pouvez avoir beaucoup de sorties, et celle-ci 09/11/2015 16:16 en est une.

2
Renan Borges

Voici une autre option pour Angular (utilisant sa propre fonction de formatage) - celle-ci est pour le format: 

AAAA-mm-jj hh: nn: ss

-Vous pouvez vous adapter à vos formats, il vous suffit de réorganiser les lignes et de changer les séparateurs.

dateAsYYYYMMDDHHNNSS(date): string {
  return date.getFullYear()
            + '-' + this.leftpad(date.getMonth() + 1, 2)
            + '-' + this.leftpad(date.getDate(), 2)
            + ' ' + this.leftpad(date.getHours(), 2)
            + ':' + this.leftpad(date.getMinutes(), 2)
            + ':' + this.leftpad(date.getSeconds(), 2);
}

leftpad(val, resultLength = 2, leftpadChar = '0'): string {
  return (String(leftpadChar).repeat(resultLength)
        + String(val)).slice(String(val).length);
}

Pour l’horodatage actuel, utilisez comme ceci:

const curTime = this.dateAsYYYYMMDDHHNNSS(new Date());
console.log(curTime);

Sera sortie par exemple: 2018-12-31 23:00:01

0
Felix

Un dernier point à ajouter à la réponse de @ kamalakar: vous devez importer la même chose dans app.module et ajouter DateFormatPipe aux fournisseurs.

    import {DateFormatPipe} from './DateFormatPipe';
    @NgModule
    ({ declarations: [],  
        imports: [],
        providers: [DateFormatPipe]
    })
0
Ajai sankaran