Как отформатировать таймер в Angular

Question

Я хочу отформатировать таймер в Angular, поэтому ниже 10, 9 становится 09, 8 - 08 и т.д. c. до 0:00.

Я не нашел встроенную трубу. Как мне этого добиться? Спасибо.

Answer 1

импорт встроенной функции formatDate

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

12-часовой формат

this.currentDateTime = formatDate(responseData.CreatedDateTime, 'MMM, dd yyyy hh:mm:ss aa', 'en-US');

24- Часы формат

this.currentDateTime = formatDate(responseData.CreatedDateTime, 'MMM, dd yyyy HH:mm:ss', 'en-US');

Answer 2

Вы можете использовать Angular Date Pipe следующим образом:

<div>{{ today | date : 'EEEE, MMMM d, hh:mm:ss a' }}</div>

TS:

today: Date = new Date(2020,3,5,10,9,8);

Выход:

Воскресенье , 5 апреля, 10:09:08

Рабочая демонстрация

здесь hh, mm, ss обеспечит наличие двух цифр, даже если значение меньше 10 * * тысяча двадцать-одина

Answer 3

Используйте следующие трубы следующим образом

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

{{datevar | date: 'short'}}

• 'short': эквивалентно 'M / d / yy, h: mm a' (15.06.15, 9:03 AM).
• «средний»: эквивалент «МММ d, у, ч: мм: сс а» (15 июня 2015 г., 9:03:01).
• «длинный»: эквивалент в 'MMMM d, y, h: mm: ss az' (15 июня 2015 года в 9:03:01 GMT + 1).
• 'full': эквивалентно 'EEEE, MMMM d, y , ч: мм: сс zzzz '(понедельник, 15 июня 2015 г., 9:03:01 GMT + 01: 00).
• «shortDate»: эквивалентно «M / d / yy» ( 15.06.15).
• 'mediumDate': эквивалентно 'MMM d, y' (15 июня 2015 г.).
• 'longDate': эквивалентно 'MMMM d, y' (15 июня 2015 г.).
• 'fullDate': эквивалентно 'EEEE, MMMM d, y' (понедельник, 15 июня 2015 г.).
• 'shortTime': эквивалентно 'h : mm a '(9:03 AM).
• ' mediumTime ': эквивалентно' h: mm: ss a '(9:03:01 AM).
• ' longTime ': эквивалентно 'h: mm: ss az' (9:03:01 GMT + 1).
• 'fullTime': эквивалентно 'h: mm: ss a zzzz' (9:03:01 AM GMT + 01: 00).

Answer 4

Вот простая версия, показывающая время в секундах:

Component:

private timer;
private counter: Date;

ngOnInit() {
  this.timer = Observable.timer(0,1000)
    .subscribe(t => {
      this.counter = new Date(0,0,0,0,0,0);
      this.counter.setSeconds(t);
    });
}

ngOnDestroy(){
  this.timer.unsubscribe();
}

Шаблон:

<div class="client-time">
  <span>Client time</span><br/>
  <strong>{{counter | date:'HH:mm:ss'}} seconds</strong>    
</div>