Как отобразить даты (в строковом виде) в формате ‘Mon, Sep 12 2:30AM AEDT’ или местный часовой пояс?

Мне трудно отобразить набор дат (string datatype) с часовым поясом.

Это мое свидание JSON:

{
    "startDate": "2016-09-04T21:00:00Z",
    "endDate": "2016-09-05T05:00:00Z"
} 

Я не могу показать его таким образом'Mon, Sep 05 2:30AM IST', т. е. отобразить часовой пояс в соответствии с местоположением пользователя. Я попытался использовать встроенный DatePipeследующим образом:

<div class="col-xs-12"> {{ startDate | date:'EEE, MMM dd h:mma Z' }}</div> 

Но это дает:

Mon, Sep 05 2:30AM GMT+5:30

1 ответ

  1. Согласно документам, встроенные DatePipeопции часового пояса предназначены 'Z'для смещения GMT (GMT+1в моем случае) или 'z'для полного имени (British Summer Time). Если вы хотите иметь другое представление, вы можете сделать это с помощью пользовательского канала, например:

    import { LOCALE_ID, Pipe, PipeTransform, Inject } from '@angular/core';
    import { DatePipe } from '@angular/common';
    
    @Pipe({
      name: 'customDate'
    })
    export class CustomDatePipe implements PipeTransform {
      datePipe: DatePipe;
    
      constructor(@Inject(LOCALE_ID) private locale: string) {
        this.datePipe = new DatePipe(locale);
      }
    
      transform(value: any, args?: any): any {
        let fullTimezone = this.datePipe.transform(value, 'z');
        let rest = this.datePipe.transform(value, 'EEE, MMM dd h:mma');
        let timezone = fullTimezone.match(/[A-Z]/g).join('');
        return `${rest} ${timezone}`;
      }
    
    }
    

    Здесь я предположил, что представление часового пояса, которое вы хотите, является инициалами, т. е. заглавными буквами в полном имени часового пояса ( B ritish S ummer T ime -> BST). Затем вы можете использовать этот канал в своем HTML: {{ startDate | customDate }}. Это также предотвращает необходимость повторения формата по всей кодовой базе в том случае, если требуется согласованный формат даты везде.

    Чтобы проверить трубу, настройте ее в TestBed:

    import { LOCALE_ID } from '@angular/core';
    import { ComponentFixture } from '@angular/core/testing';
    
    import { CustomDatePipe } from './custom-date.pipe';    
    
    describe('CustomDatePipe', () => {
      let pipe: CustomDatePipe;
    
      beforeEach(() => {
        TestBed.configureTestingModule({
          providers: [ 
            { provide: LOCALE_ID, useValue: 'en-GB' },
            CustomDatePipe
          ]
        });
    
        pipe = TestBed.get(CustomDatePipe);
      });
    
      it('should do whatever you want it to do', () => {
        expect(pipe.transform('...').toBe('...');
      });
    });
    

    Кроме того , вы можете посмотретьmoment-timezone, что предоставляет много возможностей для работы с датами и временем.