Wie formatiere ich ein Datum / eine Uhrzeit in TypeScript?

70

Ich hatte einige Probleme beim Versuch, ein DateObjekt in TypeScript so zu formatieren, wie ich es möchte.

Ich habe eine Klasse, Moduledie definiert ist als:

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

Wenn ich die Methode mit folgendem Code aufrufe:

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

Am Ende wird Folgendes in der Konsole gedruckt:

'9 November 2016 16:16:02 GMT'

Was ich sehen möchte ist:

09/11/2015 16:16

Ich habe mir die Dokumentation unter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString angesehen und kann immer noch nicht sehen, was ich tue falsch (Ich weiß, dass dies eine JavaScript-API-Dokumentation ist, aber ich bin mir ziemlich sicher, dass TypeScript dies unter der Haube verwendet).

Matt Watson
quelle
1
Die Formatierung eines Datums hat keinen Einfluss auf TypeScript, sondern nur auf Javascript.
Alex
@Alex Also, obwohl die TypeScript- toLocale...Funktionen ein Gebietsschema und ein Optionsobjekt akzeptieren, sind sie im Wesentlichen nutzlos?
Matt Watson
1
Es gibt keine solche TypeScript-Funktion, das ist eine Javascript-Funktion. TypeScript kennt lediglich die API und bietet eine typisierte Oberfläche dafür.
Alex
Ich verstehe dich jetzt. Werfen Sie einen Blick auf den transpilierten Code und er leitet ihn einfach unberührt durch. Es sieht so aus, als ob das Problem bei PhantomJS lag und wie es die Datums-API implementiert. Es formatiert Datumsangaben anders als die anderen Browser. Wenn ich es in Chrome ausführe, erhalte ich die erwartete Ausgabe.
Matt Watson

Antworten:

70

Wenn Sie die Auszeit sowie das Datum möchten, das Sie möchten Date.toLocaleString().

Dies war direkt von meiner Konsole:

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

Sie können dann Gebietsschemazeichenfolgen und Formatzeichenfolgen eingeben, um die gewünschte Ausgabe zu erhalten.

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

Dougajmcdonald
quelle
2
Die Ausgabe von meiner Konsole ist die gleiche. Wenn ich jedoch denselben Code in TypeScript verwende, erhalte ich das gleiche Ergebnis wie in meinem ursprünglichen Beitrag.
Matt Watson
Es sieht so aus, als ob das Problem bei PhantomJS lag und wie es die Datums-API implementiert. Es formatiert Datumsangaben anders als die anderen Browser. Wenn ich es in Chrome ausführe, erhalte ich die erwartete Ausgabe.
Matt Watson
Lass mich nicht mit Phantom anfangen! Es ist im Prinzip großartig, hatte einfach immer solche lustigen Fehler, wenn man es im Zorn benutzt!
Dougajmcdonald
15
  1. Sie können eine Pipe erstellen, die von der PipeTransform-Basis geerbt wurde
  2. Implementieren Sie dann die Transformationsmethode

Wird in Angular 4 verwendet - es funktioniert. Der beste Weg, ein Datum zu formatieren, ist eine Pipe.

Erstellen Sie Ihre benutzerdefinierte Pipe wie folgt:

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");
    }
  }

und es wird in einer TypeScript-Klasse wie dieser verwendet:

////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 
  }
}
Kamalakar
quelle
11

Hier ist eine weitere Option für Angular (mit eigener Formatierungsfunktion) - diese ist für das Format:

JJJJ-mm-tt hh: nn: ss

-Sie können sich an Ihre Formate anpassen, einfach die Zeilen neu anordnen und die Trennzeichen ändern

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

Verwenden Sie für den aktuellen Zeitstempel Folgendes:

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

Wird ausgegeben, zB: 2018-12-31 23:00:01

Felix
quelle
9

Update (2020)

Wie von @jonhF in den Kommentaren erwähnt, empfiehlt MomentJs, MomentJs nicht mehr zu verwenden. Überprüfen Sie https://momentjs.com/docs/

Stattdessen behalte ich diese Liste mit meinen persönlichen TOP 3 js-Datumsbibliotheken zur späteren Bezugnahme.

Alter Kommentar

Ich empfehle Ihnen, MomentJS zu verwenden

Mit dem Moment können Sie viele Ausgänge haben, und dieser 09/11/2015 16:16ist einer von dann.

Renan Borges
quelle
Update 2020: Moment schlägt jetzt vor, Moment nicht zu verwenden. Die kurze Erklärung ist, dass die Unterstützung für die native Datumsformatierung besser geworden ist und wenn Sie noch mehr benötigen, stehen kleinere und bessere Bibliotheken zur Verfügung. Siehe ihre Dokumente
JohnF
6

Option 1: Momente:

Installieren:

npm install moment --save

Importieren:

import * as moment from 'moment';

Verwendung:

let formattedDate = (moment(yourDate)).format('DD-MMM-YYYY HH:mm:ss')

Option 2: Verwenden Sie DatePipe, wenn Sie Angular ausführen:

Importieren:

import { DatePipe } from '@angular/common';

Verwendung:

const datepipe: DatePipe = new DatePipe('en-US')
let formattedDate = datepipe.transform(yourDate, 'DD-MMM-YYYY HH:mm:ss')
WtFudgE
quelle
Beste Antwort meiner Meinung nach. Ich wusste nicht, dass wir DatePipe in der Komponente verwenden können. Thx bro
Felipe Thomé
Moment.js ist ein Legacy-Projekt, das sich jetzt im Wartungsmodus befindet. sollte wahrscheinlich etwas anderes verwenden 👌
Harry Lincoln
5
function _formatDatetime(date: Date, format: string) {
   const _padStart = (value: number): string => value.toString().padStart(2, '0');
return format
    .replace(/yyyy/g, _padStart(date.getFullYear()))
    .replace(/dd/g, _padStart(date.getDate()))
    .replace(/mm/g, _padStart(date.getMonth() + 1))
    .replace(/hh/g, _padStart(date.getHours()))
    .replace(/ii/g, _padStart(date.getMinutes()))
    .replace(/ss/g, _padStart(date.getSeconds()));
}
function isValidDate(d: Date): boolean {
    return !isNaN(d.getTime());
}
export function formatDate(date: any): string {
    var datetime = new Date(date);
    return isValidDate(datetime) ? _formatDatetime(datetime, 'yyyy-mm-dd hh:ii:ss') : '';
}
Ein Nguyen
quelle
1
Hat für mich gearbeitet. Vielen Dank!
Jade290
1

Für Angular sollten Sie einfach formatDateanstelle von verwenden DatePipe.

import {formatDate} from '@angular/common';

constructor(@Inject(LOCALE_ID) private locale: string) { 
    this.dateString = formatDate(Date.now(),'yyyy-MM-dd',this.locale);
}
Seega
quelle
0

Um die Antwort von @ kamalakar hinzuzufügen, müssen Sie dieselbe in app.module importieren und den Anbietern DateFormatPipe hinzufügen.

    import {DateFormatPipe} from './DateFormatPipe';
    @NgModule
    ({ declarations: [],  
        imports: [],
        providers: [DateFormatPipe]
    })
Ajai Sankaran
quelle
-1

Das hat bei mir funktioniert

    /**
     * Convert Date type to "YYYY/MM/DD" string 
     * - AKA ISO format?
     * - It's logical and sortable :)
     * - 20200227
     * @param Date eg. new Date()
     * /programming/23593052/format-javascript-date-as-yyyy-mm-dd 
     * /programming/23593052/format-javascript-date-as-yyyy-mm-dd?page=2&tab=active#tab-top
     */
    static DateToYYYYMMDD(Date: Date): string {
        let DS: string = Date.getFullYear()
            + '/' + ('0' + (Date.getMonth() + 1)).slice(-2)
            + '/' + ('0' + Date.getDate()).slice(-2)
        return DS
    }

Sie können sicherlich HH: MM so etwas hinzufügen ...

    static DateToYYYYMMDD_HHMM(Date: Date): string {
        let DS: string = Date.getFullYear()
            + '/' + ('0' + (Date.getMonth() + 1)).slice(-2)
            + '/' + ('0' + Date.getDate()).slice(-2)
            + ' ' + ('0' + Date.getHours()).slice(-2)
            + ':' + ('0' + Date.getMinutes()).slice(-2)
        return DS
    }
Meryan
quelle
-2

Die beste Lösung für mich ist die benutzerdefinierte Pipe von @Kamalakar, jedoch mit einer geringfügigen Änderung, um das Format zu übergeben:

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

@Pipe({
    name: 'dateFormat'
  })
  export class DateFormatPipe extends DatePipe implements PipeTransform {
    transform(value: any, format: any): any {
       return super.transform(value, format);
    }
  }

Und dann genannt als:

console.log('Formatted date:', this._dateFormatPipe.transform(new Date(), 'MMM/dd/yyyy'));
Jon Vote
quelle
-24

Ich hatte ein ähnliches Problem und löste es damit

.format();
Iria
quelle
1
Wie haben Sie das Problem gelöst? Haben Sie ein vollständiges Code-Snippet, das die Eingabe und die Ergebnisse zeigt?
Billy Willoughby
Ich denke, diese Lösung hat funktioniert, weil Sie eine Momentabhängigkeit oder ähnliches verwenden, aber diese Antwort ist nicht korrekt, da Sie nicht angeben, woher der.format()
gon250